so-45972664

Add text and icons on hover

by chiperific

HTML

<div id="team">
  <figure>
    <img src="http://500px.com/graphics/pages/team/squares/oleg.jpg">
    <figcaption>Oleg Gutsol</figcaption>
    <p class="hoverable">text</p>
    <span class="hoverable">icon</span>
    <span class="hoverable">icon</span>
    <span class="hoverable">icon</span>
  </figure>
  <figure>
    <img src="http://500px.com/graphics/pages/team/squares/evgeny.jpg">
    <figcaption>Evgeny Tchebotarev</figcaption>
    <p class="hoverable">text</p>
    <span class="hoverable">icon</span>
    <span class="hoverable">icon</span>
    <span class="hoverable">icon</span>
  </figure>
  <figure>
    <img src="http://500px.com/graphics/pages/team/squares/dustin.jpg">
    <figcaption>Dustin Plett</figcaption>
  </figure>
  <figure><img src="http://500px.com/graphics/pages/team/squares/adam.jpg"><figcaption>Adam Shutsa</figcaption></figure>
  <figure><img src="http://500px.com/graphics/pages/team/squares/roxy.jpg"><figcaption>Roxy Keshavarznia</figcaption></figure>
  <figure><img src="http://500px.com/graphics/pages/team/squares/eric.jpg"><figcaption>Eric Akaoka</figcaption></figure>
  <figure><img src="http://500px.com/graphics/pages/team/squares/david.jpg"><figcaption>David Charlec</figcaption></figure>
  
</div>

CSS

html {
  font-size:62.5%;
}
body {
  margin:0;
  font-size:1.4rem;
  font-family:arial;
  background-color:#ddd;
}
img {
  border:0;
  width:100%;
  height:100%;
}
#team {
  max-width:96rem;
  width:100%;
  min-height:200px;
  height:auto;
  margin:0 auto;
  background-color:white;
  box-sizing:border-box;
  padding:0;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
  -webkit-flex-direction:row;
  flex-direction:row;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-align-content:flex-end;
  align-content:flex-end;
}
figure {
  width:12.5rem;
  height:12.5rem;
  display:block;
  margin:0.5rem 1rem 4rem 0.5rem;
  padding:0;
  box-sizing:content-box;
  color:black;
}
figure img {
  -webkit-border-radius:50%;
  -moz-border-radius:50%;  
  border-radius:50%; 
}
#team figure img {
  -webkit-transition:opacity 0.26s ease-out;   
  -moz-transition:opacity 0.26s ease-out;   
  -ms-transition:opacity 0.26s ease-out;   
  -o-transition:opacity 0.26s ease-out;   
  transition:opacity 0.26s ease-out;
 
   
}
#team:hover img, #team:active img {
  opacity:1;
}
#team:hover img:hover, #team:active img:active   {
  opacity:0.3;
 
}
figcaption {
  font-size:1.2rem;
  text-align:center;
}

#team .hoverable {
  visibility:hidden;
  margin-top: -7em;
  margin-left: 4em;
}

#team > figure:hover > .hoverable {
  visibility:visible;
}