/index

Ettudis (n) A graphic site offering freebies ranging from website designs, tumblr themes to textures and other graphic resources.

about
designer
contact

terms of use

content
resources

links
sitemap

tagboard

heart(s)

css fade effect and transition

This concise, easy tutorial teaches how to add hovering fade effects and transition using CSS only. However, this requires you to have a basic knowledge of CSS and HTML. This effect works for the latest version Safari, Chrome, Opera and Firefox.

Today, we’re going to explore this effect using the following image.

BEFORE:
WITH EFFECT:

First, we will define opacity of the image in the css so that it will look like this:

img {
opacity: 0.2;
filter:alpha(opacity=20);
-moz-opacity: 0.2;
}

**NOTE: “img” is called a selector, which is the HTML element we want to style. While “opacity” is called a property and 0.2 is called a value.

opacity – the highest value would be 1 which is equivalent to the image being 100% visible. As you decrease from 1 ~ 0, the image becomes less visible.
filter – this is specifically for IE. The highest value is 100 which makes the image 100% visible. As you decrease from 100~0, the image becomes less visible.
-moz-opacity – this is specifically for mozilla firefox and works the same way as “opacity”.

This will make the image have a low opacity, like so:

Then, we’re going to add another selector to declare the properties of when the mouse is hovering over the image.

img {
opacity: 0.2;
filter:alpha(opacity=20);
-moz-opacity: 0.2;
}

img:hover {
opacity: 1;
filter:alpha(opacity=100);
-moz-opacity: 1;
}

So now, when you hover over the image, the image will become opaque.

But evidently, the transition isn’t smooth which isn’t what we want… so we can add transition properties.

img {
opacity: 0.2;
filter:alpha(opacity=20);
-moz-opacity: 0.2;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}

img:hover {
opacity: 1;
filter:alpha(opacity=100);
-moz-opacity: 1;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}

Those properties and values are written in shorthand because it’s much simpler and clean to look at. Taking the selector -moz-transition as an example…

-moz-transition: all 0.9 ease;

The part highlighted in yellow is the property. The part highlighted in pink is the duration. the part highlighted in aqua is the timing function.

transition-property – the values can be either none or all. “None” means there will be no transition and “all” means that there will be a transition.
transition-duration – the value (in seconds) will specify how long the transition will take. If you want a slow transition, use a larger value (ex: 1s) but if you want a quicker transition, use a smaller value (ex: 0.5s)
transition-timing-function – this property specifies how the animation will proceed over time. There are 6 values for this: linear, ease, ease-in, ease-out, ease-in-out and cubic-bezier(x1, y1, x2, y2). We’re only going to look at the first 5 values because they’re the most basic, plus cubic-bezier is a bit difficult to explain.

linear – even speed throughout the transition
ease – starts out slow, speeds up, then slowly stops
ease-in – starts out slowest, then speeds up and stops
ease-out – starts out fast, then slows down and stops
ease-in-out – starts out slow, then speeds up and stops (slightly faster than “ease-in”)

So now, you should end up with what you want… a fade effect transition for your image:

You can also apply this to the id attribute for a div tag, like so:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

All you need to do is add :hover to your div tag id selector like the following:


#post {
opacity: 0.2;
filter:alpha(opacity=20);
-moz-opacity: 0.2;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}

#post:hover {
opacity: 1;
filter:alpha(opacity=100);
-moz-opacity: 1;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
}

So now, you can add this spiffy, sleek and smooth transition to your images, links, div layers and such!

8 Comments »

  1. Comment by amano — July 17, 2011 @ 5:57 pm

    Thanks for writing this tutorial! It’s so useful! 😀

  2. Comment by Kenzie — July 23, 2011 @ 7:23 pm

    Thank you for this tutorial! It was very helpful (: I used a Javascript for this and it’s a pain in the butt!

  3. Pingback by ettudis - v16 » CSS smooth drop-down menu — August 16, 2011 @ 1:39 pm

    […] etc etc is the transition which allows the menu to drop-down smoothly. I have explained this in my other tutorial but I’ll just do a quick recap. Basically, those properties and values are written […]

  4. Pingback by ettudis - v16 » CSS static animated sidebar — September 14, 2011 @ 8:35 pm

    […] and insert the url. As for opacity and transitions, I’ve explained this earlier in my tutorial about gradual fade […]

  5. Comment by JJ — October 18, 2011 @ 9:22 am

    How does this work for PNG? I’ve got a PNG background on my blog, and would like to have a hover effect for that 🙂 Please tell me how you can change the code ^^

  6. Comment by comprar seguidores en twitter — May 13, 2014 @ 7:56 am

    Great blog you’ve got here.. It’s difficult to find high-quality writing like
    yours these days. I honestly appreciate individuals like you!
    Take care!!

  7. Comment by Harpal Singh — May 20, 2014 @ 11:46 am

    Nice Tutorial, very in depth.

  8. Comment by It's Me — December 31, 2015 @ 1:11 pm

    transition all 0.9s ease; does also exist! very nice tutorial

RSS feed for comments on this post. TrackBack URL

Leave a comment

*

8 Comments