Image over effect is commonly used in lot of website to attract the customers and also used when you put some link to the particular image. There are several mouse hover effects like fading effect, sweep, bounce, zoom, shutter and etc... using css and javascript. We will see one by one.
In this post i am going to tell you how to create simple fading effect using css with the help of opacity and transition css properties.
This type of fading effect is very very simple and professional. Lot of standard websites are used this type of fading effect. Here i am given image first 0.5 opacity and then on hover the opacity increased by 1.0, You can aslo give before opacity 1. and after in hover effect 0.5 then this process is straight opposite of this hover effect.
<html>
<head>
<title>Fade effect for image using css</title>
<style>
img.opacity {
opacity: 0.5;
filter: alpha(opacity=50);
}
img.opacity:hover {
opacity: 1;
filter: alpha(opacity=100);
}
img.opacitywithtran {
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: opacity 0.56s linear;
}
img.opacitywithtran:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 0.56s linear;
}
</style>
</head>
<body>
<h2>Fade effect on hover without transition</h2>
<img src="image-fade-effect-using-css.jpg" class="opacity" /> <br/>
<h2>Fade effect on hover with transition</h2>
<img src="image-fade-effect-using-css.jpg" class="opacitywithtran" />
</body>
</html>
In this post i am going to tell you how to create simple fading effect using css with the help of opacity and transition css properties.
This type of fading effect is very very simple and professional. Lot of standard websites are used this type of fading effect. Here i am given image first 0.5 opacity and then on hover the opacity increased by 1.0, You can aslo give before opacity 1. and after in hover effect 0.5 then this process is straight opposite of this hover effect.
<html>
<head>
<title>Fade effect for image using css</title>
<style>
img.opacity {
opacity: 0.5;
filter: alpha(opacity=50);
}
img.opacity:hover {
opacity: 1;
filter: alpha(opacity=100);
}
img.opacitywithtran {
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: opacity 0.56s linear;
}
img.opacitywithtran:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 0.56s linear;
}
</style>
</head>
<body>
<h2>Fade effect on hover without transition</h2>
<img src="image-fade-effect-using-css.jpg" class="opacity" /> <br/>
<h2>Fade effect on hover with transition</h2>
<img src="image-fade-effect-using-css.jpg" class="opacitywithtran" />
</body>
</html>
0 Comments