Amazing CSS Opacity Transitions

By | November 30, 2013

In this tutorial, we are going to take a look at the pretty effects CSS transitions using the opacity feature. For the purpose of this tutorial, we will be transitioning an image with the opacity to make it appear. There is nothing much that we will be doing apart from that but you can definitely add a lot more on your site apart from just images. It is important that you are familiar with the basics of css so that you can be comfortable with this tutorial.

Simple CSS opacity transition Demo

For the purpose of this tutorial, I will have a simple page with one image. Moving the mouse over the image will cause the opacity transition. We will make use of css transition opacity in order to achieve an amazing visual effect which is always great to have on a site.

Move your mouse over the image to see the effect


This is the html code:

In order to do the transition using opacity, we will make use of some interesting CSS as shown in the code segment below:

As you can see, we have specified css properties for all the major browsers individually. Unfortunately, we have to continue doing it this way till all the popular browsers completely moves on to CSS3.

Combining Transitions

Even more interesting will be to combine more than one such transitions. Let us add a transform (inflate the image) to the opacity transition.
Here is the demo:

and the code here:

The transition effect is quite amazing and brings about an effect of perpetual motion on the site. It is like the images reveal themselves to the user. We give the transition a time period and for the transformation. This way, we get the image revealing itself slowly over time and also scaling outwards towards the user. Notice that the opacity eases in or out faster than the scaling of the image.

In conclusion, advanced css can be used to have some pretty amazing effects on a web page. The transition opacity makes it possible to reveal an image gradually over time while scaling it at the same time. This has a great impact on the user experience and makes your site exciting.

Download the sample code:

Further Reading:

[photo credit: Moyan_Brenn ]

Leave a Reply

Your email address will not be published. Required fields are marked *