so-45972664

Add text and icons on hover

by chiperific

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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;
}

figure .hoverable {
  display:none;
  margin-top: -7em;
  margin-left: 4em;
}

JavaScript

$("figure").mouseover(function(){
	$(this).find(".hoverable").show();
});

$("figure").mouseout(function(){
	$(this).find(".hoverable").hide();
});