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 3500 ms ease 100 ms :- 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 200 ms ease 0 ms :- using transition because it is changing from one style to another, without using Flash animations or JavaScripts.
