CSS Image Hover Effects

Today I am going to tell you how to create CSS image hover effects. You can use this in your ecommerce projects where you can add product title & description for images. While mouse over on images it will add nice effects to present your datas

In my previous post I had explained Image hover effects using jQuery

Here I have used css3 @keyframes rule to add animations.

Syntax is

@keyframes animationname {keyframes-selector {css-styles;}}

And I have used other css3 animation attributes like

-ms-filter
filter
transform
transition
transition-delay
animation

CSS3 animation reference – http://www.css3files.com/animation/

I have added 5 different types of animations here. Please see the demo & enjoy 🙂

HTML Code for CSS Image Hover Effects

<div class="Effects1">

<div class="hoverEffect">

<div class="front"> <img src="1.jpg" /> </div>

<a href="#">

<div class="mask">

<h2 class="title">w3lessons.info</h2>

<p>Web 2.0 Programming Blog</p>

</div>

</a> </div>

</div>

CSS3 Code for CSS Image Hover Effects

.Effects1 .hoverEffect img {

-webkit-transition: all 0.2s linear;

-moz-transition: all 0.2s linear;

-o-transition: all 0.2s linear;

-ms-transition: all 0.2s linear;

transition: all 0.2s linear;

}

.Effects1 .hoverEffect .mask {

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transition: all 0.4s ease-in-out;

-moz-transition: all 0.4s ease-in-out;

-o-transition: all 0.4s ease-in-out;

-ms-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

}

.Effects1 .hoverEffect .title {

-webkit-transform: translateY(-100px);

-moz-transform: translateY(-100px);

-o-transform: translateY(-100px);

-ms-transform: translateY(-100px);

transform: translateY(-100px);

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transition: all 0.2s ease-in-out;

-moz-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

.Effects1 .hoverEffect p {

-webkit-transform: translateY(100px);

-moz-transform: translateY(100px);

-o-transform: translateY(100px);

-ms-transform: translateY(100px);

transform: translateY(100px);

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transition: all 0.2s linear;

-moz-transition: all 0.2s linear;

-o-transition: all 0.2s linear;

-ms-transition: all 0.2s linear;

transition: all 0.2s linear;

}

.Effects1 .hoverEffect:hover img {

-webkit-transform: scale(1.1, 1.1);

-moz-transform: scale(1.1, 1.1);

-o-transform: scale(1.1, 1.1);

-ms-transform: scale(1.1, 1.1);

transform: scale(1.1, 1.1);

}

.Effects1 .hoverEffect:hover .mask {

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

opacity: 1;

}

.Effects1 .hoverEffect:hover .title, .Effects1 .hoverEffect:hover p {

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

opacity: 1;

-webkit-transform: translateY(0px);

-moz-transform: translateY(0px);

-o-transform: translateY(0px);

-ms-transform: translateY(0px);

transform: translateY(0px);

}

.Effects1 .hoverEffect:hover p {

-webkit-transition-delay: 0.1s;

-moz-transition-delay: 0.1s;

-o-transition-delay: 0.1s;

-ms-transition-delay: 0.1s;

transition-delay: 0.1s;

}