Add A Simple Css Bump Effect To Your Blogs Images


css3 logoWe all like images effects and adding some style to the pictures we use in our blogs posts.Some effects can be quiet elaborate (I have the very cool light box effect just about ready to publish) but sometimes a simple hover effect looks great.In a recent post i showed a rollover effect with some social icons changing one image to another on hover (we may look at using Css Sprites in future), in this post we will make your images simply Bump !

The bump effect is as the name suggests, when you hover your cursor over the image it bumps or raises up.In modern browsers like Firefox and Chrome the bump will be smooth however in Internet Explorer (Apart from IE9) it will still bump but not with the same grace.I have also added a border (Grey, color can be changed) with rounded corners (You know the IE story).Lets look at the demo, hover your cursor over the images on the demo page.

View Demo Button

Adding The Css Bump Effect To Images On Your Blog

We need to add the Css that creates the effect to your blog and then add a class to the image link code.I will show you the steps below for Blogger, Wordpress and other blog users could add the css to their style sheet and add the class as with blogger.

Add Bump To Blogger

Step 1. In your Blogger dashboard click > Design > Template Designer > Advanced > Add Css (Easier than it sounds )

Step 2. Copy and paste the following code into the field marked paste code here in image above, then click 'Apply To Blog' :

.gobump img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
border-radius: 5px 5px 5px 5px;

.gobump img:hover {
margin-top: 2px;

Note - Change #ccc to change the color of the border - Find Hex Color Codes Here.

Step 3. That's the Css to create the effect added to your template you now need to add a class to images you want to have the effect.First i will show you how to add this the general image codes and i will also show how it's added to images uploaded to Blogger (Its the same but the visual will help beginners).

General Images

Below is the code for an image and highlighted you can see were i have added class="gobump".Simply add the class in this position and your images will Go Bump.

<a class="gobump" href=""><img src=""/></a>

Images Uploaded To Blogger

When you upload an image to Blogger click the edit html tab in the top right of the post editor to see the image code.The code will look as below, insert class="gobump" as highlighted.

<div class="separator" style="clear: both; text-align: center;">
<a class="gobump" href="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="" width="320" /></a></div>

And it's that easy to have a simple Css Bump feature on your blogs images, with the added border and rounded corners.I have lots more Cool Css tricks lined up for future posts, as browser support improves for Css3 we have endless possibility's.

Drop Your Comments And Questions Below.

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.


  1. Nice simple Css effect thanks..

  2. Wow a really cool simple effect thanks i like it.

  3. hey, this is a cool effect! is there any way i can make my icons in the header alone go bump?

  4. When i add this code template who have slide show after adding this effect slide show stop working can you tell why/how to fix?

  5. How come it doesn't work on mine?

  6. thanx mister this works just fine...

  7. Is there a chance to avoid float:left? When i remove it or change attribute it doesn't work properly. I need to have images centered and that float ruins the effect :(


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us