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
Code
This is the html code:
|
1 2 3 |
<div> <img width="500" height="303" src="scene.jpg" > </div> |
In order to do the transition using opacity, we will make use of some interesting CSS as shown in the code segment below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.txcontainer { overflow:hidden; width:500px; height:303px; } .txcontainer img { opacity:0.1; /*Take a note of this transition block!*/ -webkit-transition:opacity 2s; -moz-transition:opacity 2s; -o-transition:opacity 2s; -ms-transition:opacity 2s; transition:opacity 2s; } .txcontainer img:hover { opacity:1; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.container img { /*Notice how opacity and transform are used in the transition here*/ -webkit-transition:opacity 2s,-webkit-transform 5s; -moz-transition:opacity 2s,-moz-transform 5s; -o-transition:opacity 2s,-o-transform 5s; -ms-transition:opacity 2s, -ms-transform 5s; transition:opacity 2s, transform 5s; opacity:0.1; } .container img:hover { opacity:1; } .container img:hover { transform:scale(1.15); -ms-transform:scale(1.15); /* IE 9 */ -moz-transform:scale(1.15); /* Firefox */ -webkit-transform:scale(1.15); /* Safari and Chrome */ -o-transform:scale(1.15); /* Opera */ } |
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:
css-opcaity-transition.zip
Further Reading:
[photo credit: Moyan_Brenn ]