CSS3 Transitions enables us to create cross fading effect using only CSS3.Previously we used jQuery or javascript for achieving Cross Fading effect in our web pages.The new features in CSS3 like transitions and transform helps to create animations or different types of effects for our web pages.Now a days all the web developers,make use of the CSS3 animations to make use of the CSS3 to make their pages more attractive.Here I am going to give an example of cross fading effect using only CSS3.These effects can be used on our websites while we create image galleries or for showing details of an image ,when we hover the image.
HTML -Source code.
<div id="images"><img alt="image1" class="Second" src="picture1.jpg">
<img alt="image2" class="First" src="picture2.jpg">
</div>
CSS3 -Source code
#images img{
position: relative;
height:257px;
width: 400px;
}
#images
{
position:absolute;
-webkit-transition :opacity 1s ease-in-out;
-moz-transition :opacity 1s ease-in-out;
-o-transition :opacity 1s ease-in-out;
transition :opacity 1s ease-in-out;
}
#images img.first:hover
{
opacity:0;}
Demo Code:
<html>
<head>
<style>
#images img
{
position:relative;
height:200px;
width:300px;
}
#images img
{
position:absolute;
-webkit-transition :opacity 1s ease-in-out;
-moz-transition :opacity 1s ease-in-out;
-o-transition :opacity 1s ease-in-out;
transition :opacity 1s ease-in-out;
}
#images img.first:hover{
opacity:0;}
</style>
</head>
<body>
<div id="images">
<img alt="image1" class="second" src="picture1.jpg"/>
<img alt="image2" class="first" src="picture2.jpg"/>
</div>
</body>
</html>
No comments:
Post a Comment