Top 10 Widely Used Image Hover Effects In Blogosphere!

 Image-Hover-Effect-for-blog You might have seen a roll over Image effect in many professional and commercial blogs. By roll over I mean that when you hover your mouse cursor on the Image, the image border colour and style/appearance changes. Well using some simple CSS you can add some amazing effects to your Blog Images. Without wasting any time lets jump straight to the steps to be followed.

This tutorial uses a simple pattern for adding codes i.e First you will need to add a CSS code just above ]]></b:skin> and then you will need to add a small HTML code like class="xyz"  to the image code inside your posts. That’s it! :>

First and Foremost See them in action!

Live Demo :- 10 Amazing Image Hover Effects!



How To Add the Top 10 Amazing Image Mouse Hover Effects To Blogger?

To do this follow these steps,

  1. Go to Blogger > Layout > Edit HTML
  2. Search for ]]></b:skin>
  3. And now paste any of your preferred CSS: code just above ]]></b:skin>

Now whenever you write a post, simply upload an image in your blogger Editor and then switch to the Edit HTML mode and search for this code <img and paste the HTML: code of your preferred Image effect just after <img as shown below,

image-hover-effects

Number #1

CSS:

.simple1 {
  padding:5px;
  border:1px solid #ccc;
  }
.simple1:hover {
  padding:5px;
  background-color:#ccc;
  }

HTML:

class="simple1"

Number #2

CSS:

.simple2 {
  padding:5px;
    background-color:#ccc;
border:1px solid #ddd;
  }
.simple2:hover {
  padding:5px;
   background-color:#eee;
border:1px solid #666;
  }

HTML:

class="simple2"

Number #3

CSS:

.black-white {
  padding:5px;
border:1px solid #ccc;
  }
.black-white:hover {
padding:5px;
  background-color:#fff;
border:10px solid #000;
  }

HTML:

class="black-white"

Number #4

CSS:

.dashed {
  padding:5px;
border:1px solid #ccc;
  }
.dashed:hover {
padding:5px;
  background-color:#fff;
border:2px dashed #000;
  }

 

HTML:

class="dashed"

Number #5

CSS:

.top-bottom {
  padding-top:5px;
  padding-bottom:5px;
border-top:3px solid #ddd;
border-bottom:3px solid #ddd;
  }
.top-bottom:hover {
  background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
  }

HTML:

class="top-bottom"

Number #6

CSS:

.curtain {
  padding-top:10px;
  padding-bottom:10px;
border-top:2px solid #ddd;
background-color:#000;
border-bottom:2px solid #ddd;
  }
.curtain:hover {
  background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
  }

HTML:

class="curtain"

Number #7

CSS:

.red {
  padding:5px;
border:1px solid #ccc;
  }
.red:hover {
padding:5px;
  background-color:#E71305;
border:10px solid #ddd;
  }

HTML:

class="red"

Number #8

CSS:

.Fadein{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.Fadein:hover{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}

HTML:

class="Fadein"

Number #9

CSS:

.Fadein2{
filter:alpha(opacity=50);
-moz-opacity: 0.30;
opacity: 0.30;
border:2px solid #000;

}
.Fadein2:hover{
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:2px solid #000;
}

 

HTML:

class="Fadein2"

Number #10

CSS:

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #7AA1C3;
padding: 0px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: white;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 0px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 5px;
}

 

HTML: For knowing how to apply this popping effect in detail read this post –> Image Pop-up Effect

<a class="thumbnail" href=""><img src="Add Image URL Here" width="100px" height="100px" border="0px" /><span><img src="Add Image URL Here" /><br /> Image Description here </span></a>

 

You can enjoy playing with these codes using MBT HTML Editor. I hope you will find this tutorial pretty useful in further enhancing your cool blogging experience :>>

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

20 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. You are really coll in CSS and HTML! Good job. Keep going on Mohammad ;)

    ReplyDelete
  2. great job mohammad you are on your way in unique content

    ReplyDelete
  3. realy: THANK YOU VERY MUCH!

    you number #1 fan
    mary =))

    P.s. Like I see a banner above my head and i'm shouting that =))

    ReplyDelete
  4. @Anup @Rahul @mary

    Love you all :> I am flattered!

    ReplyDelete
  5. How to make the #10 popup default for all the images in the post page of the template like you did it in one of your template?

    ReplyDelete
  6. Oops, I forget to thank you for this:)

    ReplyDelete
  7. @Sreejesh

    You have to add it too all your images individually to make it work. MBT Church Theme has this added to all its images. BTW how long does it take to add it to most images? :>> It is fun so try it :D

    ReplyDelete
  8. thank u very much for the share . am gonna add this on my blog.

    ReplyDelete
  9. i tried your #10 image hovering but its not working in my blog.
    but it work fine in my another blog.
    i don't want to change my template wat can i do ?

    ReplyDelete
  10. Hola, quisiera agradecer este excelente truco, me es de mucha utilidad, les agradezco mucho!..... desde Sur-America

    Hi, i from LatinoAmerica, and i want say that this post is excelent!, thanks!, good bye!

    ReplyDelete
  11. Thanks so much, i love this efects!

    ReplyDelete
  12. How I wish there is a Wordpress Plug in for this :(

    ReplyDelete
  13. Dear Sir, I just wanted to know the process by which the colour of the header of sub header changes when the mouse hovers over it. My email add is parthasarathi108@gmail.com and my blog add is parthasarathi108.blogspot.com. Thanks

    ReplyDelete
  14. can i use this for post thumbnail ? if not would u mind making a guide for a hover effect like a play button in the center of the image?

    ReplyDelete
  15. any way great work sir... keep going

    ReplyDelete