CSS3 is useful for creative designs and effects.In this tutorial I will show you how to create fade out transition effect using CSS3. You can see demo link below.
View demo – here
Download Code – here
Let’s see our HTML,
Here we have simply added div with 15 icons and based on icon images is assigned using css.
See Here:
.back-face i.face-1{
background-image:url("images/guy-1.jpg");
}
So, how is this working?
On hovering the image class “on” is added and on out “off” class is added and on is removed.These two classes have their respective css rules, see below.
See below hover event for adding on and off class.
$( document ).ready(function() {
$('.back-face i').hover(
function () {
$(this).removeClass("off");
$(this).addClass("on");
},
function () {
$(this).removeClass("on");
$(this).addClass("off");
}
);
});
Now will show you CSS part, see below syntax to write transition.
div.faces i {
cursor: pointer;
height: 50px;
padding: 2px 2px 2px 2px;
-webkit-transition: opacity 3500ms ease 100ms;
-o-transition: opacity 3500ms ease 100ms;
transition: opacity 3500ms ease 100ms;
-webkit-transform: translateZ(0);
width: 50px;
display:block;
float:left;
}
div.faces i.off {
opacity: 0;
filter: alpha(opacity=0);
}
div.faces i.on {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 200ms ease 0ms;
-o-transition: opacity 200ms ease 0ms;
transition: opacity 200ms ease 0ms;
}
- Transition Explanation :- transition: opacity 200ms ease 0ms; : property duration timing-function delay|initial|inherit;
What we do when class is “off”?
- opacity: 0 :- Adding opacity for an image with 0 value means image is not visible.
- transition: opacity 3500ms ease 100ms :- using transition because it is changing from one style to another, without using Flash animations or JavaScripts.
If it is “on” then?
- opacity: 1 :- Image is visible because opacity is 1.
- transition: opacity 200ms ease 0ms :- using transition because it is changing from one style to another, without using Flash animations or JavaScripts.
