Cacher is the code snippet organizer for pro developers

<a href="#" class="animated-link">
  <h2 class="normal-text">Normal State</h2>
  <h2 class="hover-text">Hover State</h2> 
  <img src="http://i111.photobucket.com/albums/n131/silversoldier_real/star_zps36c2501a.png">
</a>

.animated-link {
  display: block;
  width: 300px;
  height: 180px;
  background-color: #16eff7;
  text-decoration: none;
  color: #000;
  font-family: Arial, sans-serif;
  position: relative;
  overflow: hidden;
  
  box-shadow: 2px 5px 0 2px #088589,3px 10px 0 3px #074547;
}

.animated-link .normal-text {
  position: absolute;
  left: 20px;
  top: 30px;
  transition: all .3s ease-out;
}

.animated-link .hover-text {
  position: absolute;
  font-size: 100px;
  transform: translateY(56deg);
  left: 30px;
  top: -30px;
  opacity: 0;
  transition: all .3s ease-out;
}

.animated-link img {
    position: absolute;
    bottom: 30px;
    right: 30px;
    transition: all .3s ease-out .3s;
}

.animated-link:hover img {
  transform: rotateZ(360deg) scale(4);
  opacity: .7;
}
.animated-link:hover .normal-text{
  transform: scale(5);
  opacity: 0;
  rigth: -100px;
}

.animated-link:hover .hover-text{
  transform: scale(1) rotateZ(360deg);
  font-size: 23px;
  opacity: 1;
  top: 10px;
}