hover card

by Jordan Dayton

HTML

<div class="wrapper">

<div id="cf">
  <img class="bottom" src="https://community.canvaslms.com/resources/statics/95663/hover_card2.png?a=1479324071754" />
  <img class="top" src="https://community.canvaslms.com/resources/statics/95663/hover_card1.png?a=1479324757086" />
</div>

<div id="cf">
  <img class="bottom" src="https://community.canvaslms.com/resources/statics/95663/hover_card2.png?a=1479324071754" />
  <img class="top" src="https://community.canvaslms.com/resources/statics/95663/hover_card1.png?a=1479324757086" />
</div>

</div>

CSS

.wrapper {
  display: flex;
  text-align: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

#cf {
  position:relative;
  height:auto;
  width:371px;
  margin:0 auto;
  display: inline-block;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity .6s ease-in-out;
  -moz-transition: opacity .6s ease-in-out;
  -o-transition: opacity .6s ease-in-out;
  transition: opacity .6s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}