Blog2Life offers a complete series of posts with an in-depth look into styling post images. The 4 part series covers all area’s of image styling from padding images to prevent text touching images, through margins and borders.. right the way up to link hovering effects.

We cover all the coding skills required to get your images looking perfect, the coding techniques we use are all HTML and CSS (Cascade Styling Sheet) based. If those meant nothing to you don’t worry we more through each of the stages step by step explaining everything along the way.

And if that wasn’t enough for you we also offer some great styling techniques for you to just simple copy and paste into your own website code for easy implementation and use. [...]

Following on from parts 1, 2 and 3 we shall now start looking into image hovering. By this I mean what happens to an image when you hover over it for instances where you may have placed and image for a link within post content.

We shall investigate how to code for such events and after that I will provide some nice border hover effects I’ve found over the last year for you to implement with ease onto your site. [...]

Now you’ve got a grasp of what’s going on with the coding and classes with the explanations from Part 1 and Part 2, I’ve taken the time to create some nice looking styled images for you!

All that is required of you is to insert code to your .css file and add a few classes to your image (as covered in Part 2). Yes, it really is that simple!

Example 1

This one is a simple yet elegant 1px border with padding and margins

Classes:

.imagestyle {margin:0 8px 8px 8px; padding:4px; border:1px solid #cccccc;}
.floatleft {float:left;}
.floatright {float:right;}

Image:

class=”imagestyle floatleft”   OR
class=”imagestyle floatright”

[...]

Now we’ve got the hang of the image code and how to add styling to individual images from Part 1 we shall now move on to look at how to style images in a more efficient way and help you reduce errors in your coding.

Our Aim

The image displayed on the right is what we are aiming to achieve in this part of the series. To do this we will be using classes

This tutorial will give your images a nice bordered effect to your images which is found quite widely over the internet. The style makes use of margins, padding and thin border.. as you can see. [...]

For those that blog regularly but have very limited skills on coding it can be hard to stylise elements within your blog posts and it can become apparent that features such as images, and div’s just don’t seem to fit in with the post and generally look unpleasant.. but we’re here to change all that! [...]

Here are 3 images very close to the images used on Blog2Life to advertise the 4 125px by 125px images present in the sidebar.

We hope these images will help you raise the visual appeal of the advertisement spot you are looking to sell on your blog or website. Making the advertise spot not only more visible potential advertisers but also increase the likelihood of them investing in an advert on your website. [...]

In this tutorial we will show you how to use your own image in place of the default image used by addthis.com, a popular and powerful bookmarking and article sharing service giving you greater control over the look of your website. [...]