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

Need Quick Help within 24 Hours? ASK NOW



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 »

24 comments : Post Yours! Read Comment Policy ▼
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. This comment has been removed by a blog administrator.

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

    ReplyDelete
  10. Great! Thanks for your tricks! It works well on my site
    By the way I try to test for the "highlight for the author comnment..."
    I am Khánh Trắng From Viet Nam
    Join me : www.khanhtrangonline.com

    ReplyDelete
  11. 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
  12. 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
  13. Thanks so much, i love this efects!

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

    ReplyDelete
  15. 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
  16. 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
  17. Citie ingenious, unique perspective door Legends 3, the way new. Consider every word, sentence, fine, the plot twists and turns, but always separated from the central idea, fascinating, light words, the display of the truths of life,Sac Vanessa Bruno fully embodies the profound cultural base your rhyme and rich social experience, be described as irony classic, curse of the secret, Sac Vanessa Bruno Cuir which is what I read boring generation of hard study the pursuit of the highest level ah!
    An artistic point of view, this post is already as classic, but its significance is far greater than the classic itself. As the saying goes: "Come to find PW curse and invisible, ridiculed in the shadowless,here Xiao Ma were among the real power!" Come to find legendary landlord ironic really deserves to pioneer a new generation of long-haired originator sector

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

    ReplyDelete