Tag Archives: effects

Ultimate image hover effects

DEMO DOWNLOAD
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.

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

JS

<script src="jquery.min.js"></script>
<script src="jquery.hover3d.min.js"></script>
<script> $(".project").hover3d({ selector: ".project__card" }); </script>