Fade out transition effect using CSS3

January 6, 2015
by Inaam Hussain

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 demohere
Download Codehere
Let’s see our HTML,

index.html
<div class="faces">
    <div class="back-face">
        <i rel="1" class="face-1 off"></i>
        <i rel="2" class="face-2 off"></i>
        <i rel="3" class="face-3 off"></i>
        <i rel="4" class="face-4 off"></i>
        <i rel="5" class="face-5 off"></i>
        <i rel="6" class="face-6 off"></i>
        <i rel="7" class="face-7 off"></i>
        <i rel="8" class="face-8 off"></i>
        <i rel="9" class="face-9 off"></i>
        <i rel="10" class="face-10 off"></i>
        <i rel="11" class="face-11 off"></i>
        <i rel="12" class="face-12 off"></i>
        <i rel="13" class="face-13 off"></i>
        <i rel="14" class="face-14 off"></i>
        <i rel="15" class="face-15 off"></i>
    </div>
</div>

Here we have simply added div with 15 icons and based on icon images is assigned using css.
See Here:

style.css
.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.

site.js
$( 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.

style.css
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.

About

Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Get notified on our new articles

Subscribe to get the latest on Node.js, Angular, Blockchain and more. We never spam!
First Name:
Email:

4 comments

    • |

      Yes you are right we can use “:hover”. but in this tutorial i have used “on” and “off” classes for distinguished and better explanation. and applied css based on that.
      For hover simply have to do below changes in style.css,

      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;
      opacity: 0;
      filter: alpha(opacity=0);
      }
      div.faces i:hover {
      opacity: 1;
      filter: alpha(opacity=100);
      -webkit-transition: opacity 200ms ease 0ms;
      -o-transition: opacity 200ms ease 0ms;
      transition: opacity 200ms ease 0ms;
      }

    • |

      Yes right. please refer above comment and explanation.

Leave a Comment