Ultimate image hover effects using css3

Today I share with you modern design image hover effects using CSS3. In the previous month, I was created ultimate button hover effects that are easy to implement with your HTML pages. And now, create image hover effects which are perfect for portfolio or product listings. For this image animation effects I use transform, translate, transition properties of CSS3. In this tutorial, total number of 8 ultimate hover effects and every single effect contain 3 different effects using properties of CSS3. So you easily learn the single property like transform, translate and transition use with 3 different demos.

image hover effects

For example: I show one example with HTML and css code. For more examples click on demo link below.

HTML

<div class="effect-1">
   <div class="image-box">
      <img src="img-2.jpg" alt="Image-3">
   </div>
   <div class="text-desc">
      <h3>Your Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <a href="#" class="btn">Learn more</a>
   </div>
</div>

CSS

.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;
}

Output

output image

Add Comment

Required fields are marked *. Your email address will not be published.