teak team member styles

app/routes/team.coffee

@@ -13,6 +13,7 @@ Route = TravisRoute.extend
         nationality: 'germany'
         country: 'germany'
         image: ''
+        gif: ''
       },
       {
         name: 'Josh Kalderimis'
@@ -21,6 +22,7 @@ Route = TravisRoute.extend
         nationality: 'newzealand'
         country: 'germany'
         image: ''
+        gif: ''
       },
       {
         name: 'Fritz Thielemann'
@@ -29,6 +31,7 @@ Route = TravisRoute.extend
         nationality: 'germany'
         country: 'germany'
         image: ''
+        gif: ''
       },
       {
         name: 'Konstantin Haase'
@@ -37,6 +40,7 @@ Route = TravisRoute.extend
         nationality: 'germany'
         country: 'germany'
         image: ''
+        gif: ''
       },
       {
         name: 'Mathias Meyer'
@@ -45,6 +49,7 @@ Route = TravisRoute.extend
         nationality: 'germany'
         country: 'germany'
         image: ''
+        gif: ''
       },
       {
         name: 'Piotr Sarnacki'
@@ -53,6 +58,7 @@ Route = TravisRoute.extend
         nationality: 'poland'
         country: 'germany'
         image: ''
+        gif: ''
       },
       {
         name: 'Anika Lindtner'
@@ -61,6 +67,7 @@ Route = TravisRoute.extend
         nationality: 'germany'
         country: 'germany'
         image: ''
+        gif: ''
       },
       {
         name: 'Henrik Hodne'
@@ -69,6 +76,7 @@ Route = TravisRoute.extend
         nationality: 'norway'
         country: 'norway'
         image: ''
+        gif: ''
       },
       {
         name: 'Justine Arreche'
@@ -77,6 +85,7 @@ Route = TravisRoute.extend
         nationality: 'usa'
         country: 'usa'
         image: ''
+        gif: ''
       },
       {
         name: 'Hiro Asari'
@@ -85,6 +94,7 @@ Route = TravisRoute.extend
         nationality: 'japan'
         country: 'usa'
         image: ''
+        gif: ''
       },
       {
         name: 'Dan Buch'
@@ -93,6 +103,7 @@ Route = TravisRoute.extend
         nationality: 'usa'
         country: 'usa'
         image: ''
+        gif: ''
       },
       {
         name: 'Lisa Passing'
@@ -100,6 +111,7 @@ Route = TravisRoute.extend
         nationality: 'germany'
         country: 'germany'
         image: ''
+        gif: ''
       },
       {
         name: 'Carla Drago'
@@ -108,6 +120,7 @@ Route = TravisRoute.extend
         nationality: 'italy'
         country: 'germany'
         image: ''
+        gif: ''
       },
       {
         name: 'Anja Reichmann'
@@ -116,6 +129,7 @@ Route = TravisRoute.extend
         nationality: 'germany'
         country: 'germany'
         image: ''
+        gif: ''
       },
       {
         name: 'Aly Fulton'
@@ -124,6 +138,7 @@ Route = TravisRoute.extend
         nationality: 'usa'
         country: 'usa'
         image: ''
+        gif: ''
       },
       {
         name: 'Amanda Quaranto'
@@ -132,6 +147,7 @@ Route = TravisRoute.extend
         nationality: 'usa'
         country: 'usa'
         image: ''
+        gif: ''
       },
       {
         name: 'Jen Duke'
@@ -140,6 +156,7 @@ Route = TravisRoute.extend
         nationality: 'usa'
         country: 'germany'
         image: ''
+        gif: ''
       },
       {
         name: 'Brandon Burton'
@@ -148,6 +165,7 @@ Route = TravisRoute.extend
         nationality: 'usa'
         country: 'usa'
         image: ''
+        gif: ''
       },
       {
         name: 'Emma Trimble'
@@ -156,6 +174,7 @@ Route = TravisRoute.extend
         nationality: 'usa'
         country: 'usa'
         image: ''
+        gif: ''
       },
       {
         name: 'María de Antón'
@@ -164,6 +183,7 @@ Route = TravisRoute.extend
         nationality: 'spain'
         country: 'spain'
         image: ''
+        gif: ''
       },
       {
         name: 'Danish Khan'
@@ -172,6 +192,7 @@ Route = TravisRoute.extend
         nationality: 'usa'
         country: 'usa'
         image: ''
+        gif: ''
       },
       {
         name: 'Dominic Jodoin'
@@ -180,6 +201,7 @@ Route = TravisRoute.extend
         nationality: 'canada'
         country: 'canada'
         image: ''
+        gif: ''
       },
       {
         name: 'Liza Brisker'
@@ -187,6 +209,7 @@ Route = TravisRoute.extend
         nationality: 'russia'
         country: 'germany'
         image: ''
+        gif: ''
       }
     ]
 

app/styles/app/layouts/home-pro.sass

@@ -405,13 +405,11 @@
 
 
 .team-flags
-  vertical-align: middle
+  margin-top: 10px
   img
-    display: inline-block
     width: 26px
     height: 16px
   .flag-divider
-    font-size: 1.3em
     color: #d9d9d9
     padding: 0 5px
 
@@ -419,13 +417,25 @@
   width: 113px
   height: 113px
   border-radius: 50%
+  margin: auto
   overflow: hidden
   img
     background-color: green
+    display: block
+    width: 100%
+    height: 100%
+  .back
+    display: none
+  &:hover
+    .back
+      display: block
+    .front
+      display: none
 
 .team-member
   flex: 1 0 190px
   padding: 0
+  margin-bottom: 4em
   text-align: center
 
 .list--team
@@ -439,7 +449,7 @@
 .team-name
   font-weight: 300
   font-size: 20px
-  margin: 0
+  margin: 10px 0 0 0
   line-height: 1.5
 .team-title
   font-style: italic

app/templates/components/team-member.hbs

@@ -1,5 +1,6 @@
 <figure class="team-image">
-  <img src="{{member.image}}" alt="">
+  <img class="front" src="{{member.image}}" alt="">
+  <img class="back" src="{{member.gif}}" alt="">
 </figure>
 <h3 class="team-name">{{member.name}}</h3>
 <p class="team-title">{{member.title}}</p>