Style Your Images Using Simple CSS

Style Your Images Using Simple CSS Style Your Images Using Simple CSS 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>

Leave a Reply

14 Comments on "Style Your Images Using Simple CSS"

Notify of
avatar
Sort by:   newest | oldest | most voted
Search DDL
Guest

Great ! Thanks for the post 🙂

View Comment
Search DDL
Guest

Great ! Thanks for the post 🙂

View Comment
Reza Winandar
Guest

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

View Comment
Divya Sai
Guest

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 !

View Comment
mehdi
Guest

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

View Comment
Sudeep Acharya
Guest

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

View Comment
Aissa
Guest

Thanks for this post! 🙂

View Comment
Divya Sai
Guest

You are welcome Aissa!

View Comment
Anonymous
Guest

Hello –

Is it possible to disable some images from the effect?

View Comment
Divya Sai
Guest

Yes it is possible.

View Comment
Kreatifbuzz
Guest

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

Really Like It :X

View Comment
Kreatifbuzz
Guest

Opss..I got problem…

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

View Comment
haryudanto
Guest

how to disable some images from the effect?

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

View Comment
Piya Gupta
Guest

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

View Comment
wpDiscuz