Introduction :-
<style>
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<h1>image</h1>
<img src="download.jpg" width="150" height="100" alt="kk" />
<img src="Ebay-logo.jpg" width="150" height="100" alt="kk" />
</body>
</html>
Hii Friends...
Today I explain how to make a hover on a image with the help of css (Cascading style sheet). And the hover works on mouse-over event.
Step : 1 The Code goes here :->
<html xmlns="http://www.w3.org/1999/xhtml">
<head><style>
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<h1>image</h1>
<img src="download.jpg" width="150" height="100" alt="kk" />
<img src="Ebay-logo.jpg" width="150" height="100" alt="kk" />
</body>
</html>
(Here I give two css style one is for show clear image and second one is for fade the image now I show demo of this code. )
DEMO:-
1) The First Image Show Fade On Images
2) The Second Image Show Clear Image
0 comments:
Post a Comment