Image Hover Effect is used to brighten the image when mouse cursor is pointed over it. This effect is being used in many blogs and sites. Its very easy to use this effect in your blog and can be done by using a CSS code in your template.
Here is the demo of this hack :
Actual Image
Effect Added
To add this Image Hover Effect go to > Layout > Edit HTML and search for </head> and add the below code above this tag.
<style type="text/css">After adding code, have a glance at the below trick :
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
Actual Code
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghShQDpFb8eTFL0_AcoBaVW0N_Hrc21iYLV7Y3Pp5euwCXcP4jCkNJ3krBxqh-58Bs8300wVukWitDNjWuUHfb0LT41DgMyxjYF1NgdJnfJk_0QRXPihpiFyzsY1uRelWw3C2y_QwuP2o/s1600/ImageHover.jpg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghShQDpFb8eTFL0_AcoBaVW0N_Hrc21iYLV7Y3Pp5euwCXcP4jCkNJ3krBxqh-58Bs8300wVukWitDNjWuUHfb0LT41DgMyxjYF1NgdJnfJk_0QRXPihpiFyzsY1uRelWw3C2y_QwuP2o/s320/ImageHover.jpg" /></a>
Changed Code
<a class="linkopacity" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghShQDpFb8eTFL0_AcoBaVW0N_Hrc21iYLV7Y3Pp5euwCXcP4jCkNJ3krBxqh-58Bs8300wVukWitDNjWuUHfb0LT41DgMyxjYF1NgdJnfJk_0QRXPihpiFyzsY1uRelWw3C2y_QwuP2o/s1600/ImageHover.jpg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghShQDpFb8eTFL0_AcoBaVW0N_Hrc21iYLV7Y3Pp5euwCXcP4jCkNJ3krBxqh-58Bs8300wVukWitDNjWuUHfb0LT41DgMyxjYF1NgdJnfJk_0QRXPihpiFyzsY1uRelWw3C2y_QwuP2o/s320/ImageHover.jpg" /></a>
Add class="linkopacity" tag to the original code, after uploading the image.
Subscribe to our blog
If you like this site >> Subscribe to our feed
3 comments:
No need to add "class" for each pics separately. I'll explain how to do it adding a simple code using default minima template...
Find this code
.post img {
padding:4px;
border:1px solid $bordercolor;
}
Now replace above code with following code.
.post img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
.post:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
Yeah, wajira you are right. But using the above method, effect will be added to every image of the post. By using class="linkopacity" effect will be added to selected images only.
yep. You're correct :)
Post a Comment