Simple Image hover CSS effect

Here's a FREE collection of simple image hover effects in pure CSS3. Bring your images to life with some beautiful animation and transition effects.

HTML

<h2>Enlarge Image on hover</h2>

<p class="enlarge"> <a target="_blank" href="https://www.facebook.com/coolshatul" class="logo"><img alt="Facebook" src="http://www.nadan.net/dev/wp-content/uploads/2018/07/logo-01-resize.jpg" /></a>
 <a target="_blank" href="https://twitter.com/coolshatul"><img alt="Twitter" src="http://i.imgbox.com/LZ8vfLX2.png" /></a>
 <a target="_blank" href="http://www.linkedin.com/in/coolshatul"><img alt="Google" src="http://i.imgbox.com/aLKNVqkw.png" /></a>
 <a target="_blank" href="https://plus.google.com/+ShatulPatil"><img alt="Google" src="http://i.imgbox.com/3pWSyXmD.png" /></a>

</p>

<h2>Shrink Image on hover</h2>

<p class="shrink"> <a target="_blank" href="https://www.facebook.com/coolshatul"><img alt="Facebook" src="http://i.imgbox.com/FsBVakd8.png" /></a>
 <a target="_blank" href="https://twitter.com/coolshatul"><img alt="Twitter" src="http://i.imgbox.com/LZ8vfLX2.png" /></a>
 <a target="_blank" href="http://www.linkedin.com/in/coolshatul"><img alt="Google" src="http://i.imgbox.com/aLKNVqkw.png" /></a>
 <a target="_blank" href="https://plus.google.com/+ShatulPatil"><img alt="Google" src="http://i.imgbox.com/3pWSyXmD.png" /></a>

</p>

<h2>Rotate Image on hover</h2>

<p class="rotate"> <a target="_blank" href="https://www.facebook.com/coolshatul"><img alt="Facebook" src="http://i.imgbox.com/FsBVakd8.png" /></a>
 <a target="_blank" href="https://twitter.com/coolshatul"><img alt="Twitter" src="http://i.imgbox.com/LZ8vfLX2.png" /></a>
 <a target="_blank" href="http://www.linkedin.com/in/coolshatul"><img alt="Google" src="http://i.imgbox.com/aLKNVqkw.png" /></a>
 <a target="_blank" href="https://plus.google.com/+ShatulPatil"><img alt="Google" src="http://i.imgbox.com/3pWSyXmD.png" /></a>

</p>

<h2>Tilt Image on hover</h2>

<p class="tilt"> <a target="_blank" href="https://www.facebook.com/coolshatul"><img alt="Facebook" src="http://i.imgbox.com/FsBVakd8.png" /></a>
 <a target="_blank" href="https://twitter.com/coolshatul"><img...

CSS

.logo img{
  width:150px;
  height:150px;
}
.enlarge img:hover {
    text-decoration:none;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    z-index: 2;
}
.shrink img:hover {
    text-decoration:none;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    z-index: 2;
}
.rotate img {
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    transition: all 0.8s ease;
}
.rotate img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
.tilt img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.tilt img:hover {
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    -o-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    transform: rotate(-25deg);
}