Image Hover Effect In Blogger

Friday, December 18, 2009



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">

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>
After adding code, have a glance at the below trick :
Actual Code

<a href="http://3.bp.blogspot.com/_phTOUKb4VO4/SyujQJA9FPI/AAAAAAAAA5U/RNV35wNVZm4/s1600/ImageHover.jpg">
<img border="0" src="http://3.bp.blogspot.com/_phTOUKb4VO4/SyujQJA9FPI/AAAAAAAAA5U/RNV35wNVZm4/s320/ImageHover.jpg" /></a>

Changed Code

<a class="linkopacity" href="http://3.bp.blogspot.com/_phTOUKb4VO4/SyujQJA9FPI/AAAAAAAAA5U/RNV35wNVZm4/s1600/ImageHover.jpg">
<img border="0" src="http://3.bp.blogspot.com/_phTOUKb4VO4/SyujQJA9FPI/AAAAAAAAA5U/RNV35wNVZm4/s320/ImageHover.jpg" /></a>

Add  class="linkopacity" tag to the original code, after uploading the image.

Subscribe to our blog

Do you have any Suggestions, add your comment. Please don't Spam!
If you like this site >> Subscribe to our feed

3 comments:

Wajira December 19, 2009 at 3:38 PM said...

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; }

Bharath Mandava December 19, 2009 at 4:20 PM said...

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.

Wajira December 20, 2009 at 9:54 AM said...

yep. You're correct :)

Post a Comment