This will be the best hover effect that we can see on the images ..... you ca switch between the images with just a hover effect.
Here is the css code:-
#box {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#box 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;
}
#box img.top:hover {
opacity:0;
}
Here is theHTML code:-
Here are the snapshots:-Here is the css code:-
#box {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#box 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;
}
#box img.top:hover {
opacity:0;
}
Here is theHTML code:-
Snapshot:- 1
Snapshot:- 2
Snapshot:- 3
Webtey VJ
No comments:
Post a Comment