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>

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts