Style Your Images Using Simple CSS


We know that images are necessary for blogs to make the posts attractive. But rather than simply adding images in your blog, you can easily add borders/shadow effects to all the images in your blog.
Here are some examples to dress-up your images:

First of all, what to change?

While linking/embedding images in your posts/articles you use the tag - img, for example:
<a href="http://bloggerstop.net"><img src="http://i40.tinypic.com/mihsgg.jpg"/></a>
So find a code similar to this in your blog's template (Dashboard -> Layout -> Edit HTML):
.post img {
margin: 5px;
...
...
...
padding: 3px;
}

If the code is missing in your blog, then add it yourself before the </head> tag like this:
<style type="text/css">
.post img {
border: 0px;
}
</style>

Now you have to modify the above code, depending on the image-style you want (described below).

1. Single border [EXAMPLE]
<style type="text/css">
.post img {
border: 1px solid red;
}
</style>

2. Single border with hover effect [EXAMPLE]
<style type="text/css">
.post img {
border: 5px solid gray;
}
.post img:hover {
border: 5px solid black;
}
</style>

3. Single border - dotted - Stamp-Style [EXAMPLE]
With Black hover effect
<style type="text/css">
.post img {
border: 3px dotted gray;
}
.post img:hover {
border: 3px dotted black;
}
</style>

4. Double Border [EXAMPLE]
<style type="text/css">
.post img {
border: 5px solid gray;
padding: 5px; /*Inner border size*/
background: #d5d5d5; /*Inner border color*/</style>

}
</style>

5. Double border - Hover effect [EXAMPLE]
<style type="text/css">
.post img {
border: 5px solid gray;
padding: 5px; /*Inner border size*/
background: #d5d5d5; /*Inner border color*/

}
.post img:hover {
border: 5px solid black;
padding: 5px; /*Inner border size*/
background: #gray; /*Inner border color*/

}
</style>

6. Special Border 1 (Shadow Effect) [EXAMPLE]
<style type="text/css">
.post img {
background: url(http://i30.tinypic.com/1qsh1h.jpg) no-repeat right bottom;
padding: 5px 10px 10px 5px;
border: 0px;

}
</style>

7. Special Border 2 (Framed at top-right corner) [EXAMPLE]
<style type="text/css">
.post img {
background: url(http://i26.tinypic.com/2u5ufz8.jpg) no-repeat top left;
padding: 20px 10px 5px 35px;
border: 0px;

}
</style>

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

14 comments

Write comments
Search DDL
August 23, 2009 12:31 AM delete

Great ! Thanks for the post :)

Reply
avatar
Search DDL
August 23, 2009 12:31 AM delete

Great ! Thanks for the post :)

Reply
avatar
Reza Winandar
August 25, 2009 9:24 AM delete

Hey, is this makes the loading time slower? Cause I don't want to makes my blogs loads slowly. Blogger Make Money

Reply
avatar
Divya Sai
August 25, 2009 9:46 AM delete

No Reza, it will not affect the loading time...only in the last two codes (6 and 7) two images are used, but they are too small to slow your blog...so try them out and tell me your experience !

Reply
avatar
September 04, 2009 5:41 PM delete

this is one of the most amazing post i see in my blogging life!

Reply
avatar
September 21, 2009 1:17 PM delete

Does not work on me please help me i will send you my blogger template please fix error and send me back

Reply
avatar
Anonymous
July 27, 2010 9:49 PM delete

Hello -

Is it possible to disable some images from the effect?

Reply
avatar
November 16, 2010 11:29 PM delete

Thanks for your tutorial Divya Sai, this is what I want.

Really Like It :X

Reply
avatar
November 17, 2010 12:33 AM delete

Opss..I got problem...

How to add the border to single picture using Special Border 2.

Reply
avatar
May 06, 2011 11:30 AM delete

how to disable some images from the effect?

there are some image that i want to make it blend with the background

Reply
avatar
July 08, 2012 8:58 AM delete

Thanks for this wonderful post, like the last image design had applied too on my blogger blog :)

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon