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:
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!
5 Comments »
RSS feed for comments on this post. TrackBack URL
Thanks for writing this tutorial! It’s so useful!
Thank you for this tutorial! It was very helpful (: I used a Javascript for this and it’s a pain in the butt!
[...] 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 [...]
[...] and insert the url. As for opacity and transitions, I’ve explained this earlier in my tutorial about gradual fade [...]
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 ^^