Image Reveal on Hover

Custom CSS

/* Image Reveal on Hover */
.ELEMENT {
  text-align:center;
   font-size:32px;
   margin-bottom:30px;
}

.ELEMENT:hover {
   font-size:52px;
   font-style:italic;
   color: red;
}

.ELEMENT:hover:before {
  content: '';
  background: url('YOUR IMAGE LINK HERE');
  background-size:contain;
  background-repeat:no-repeat;
  width: 20vw; 
  left: 10vw; 
  height: 30vh; 
  margin-top:0px;
  position: absolute;
  opacity:1;
  transition: transform .4s cubic-bezier(.86,0,.07,1),opacity .4s cubic-bezier(.86,0,.07,1);
   transform: translate3d(.33333vh,-11.66667vh,0);
  -webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
  animation: flip-in-hor-bottom 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}

//image animations
@-webkit-keyframes flip-in-hor-bottom {
  0% {
    -webkit-transform: rotateX(80deg);
            transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}
@keyframes flip-in-hor-bottom {
  0% {
    -webkit-transform: rotateX(80deg);
            transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
    opacity: 1;
  }
}

Source: The Square Stylist