CSS3 を使用して、非常にクールなマウスオーバー画像アニメーションの 8 つのグループを実装します。

<link rel="stylesheet" href="css/hover-effects.css" />

<p class="effect-1">
   <p class="image-box">
      <img src="img-2.jpg" alt="Image-3">
   </p>
   <p class="text-desc">
      <h3>Your Title</h3>
      <p>......</p>
      <a href="#" class="btn">Learn more</a>
   </p>
</p>

.effect-1{   
  float: left;    
  width: 340px;    
  position: relative;    
  overflow: hidden;    
  text-align: center;    
  border: 4px solid rgba(255, 255, 255, 0.9);    
  overflow: visible;   
}   
.effect-1 img{   
  transition: 0.5s;   
}   
.effect-1:hover img{   
  transform: scale(0.3) translateY(-110%);   
  position: relative;    
  z-index: 9;   
} .effect-1 .text-desc{   
  transform: translateY(100%);    
  opacity: 0;    
  padding: 85px 20px 10px;    
  transition: 0.5s;   
} .effect-1:hover .text-desc{   
  transform: translateY(0px);    
  opacity: 1;   
}