Style an image with CSS

Posted in on 18 September 2005

Want to get that ‘real photo’ effect on your images? You know, the one that looks like a holiday snap with its white border.

Well, you can create each image in Fireworks/Photoshop and add these to your website – but you can also do it with CSS by creating a style that gives you the snapshot look. This may save time when when you want to change the effect – perhaps increase the border width or change the border colour? That’s easy to do with a style sheet but if you have many images would be time consuming with Fireworks/Photoshop.

Firstly put your image in a <div> like this

<div><img src="yourimage.jpg" width="250" height="188"></div>

Assign a class to the <div>. Here, I have used ‘photo’ but you can use whatever you want. The image dimensions should be specific to your image, of course. [Don’t forget to add an “alt” tag as well]

<div class="photo"><img src="yourimage.jpg" width="250" height="188"></div>

Set up the style in your stylesheet like this.

.photo { border: 1px solid #CCC;
background-color: #FFF;
padding: 5px;
float: left;
}

In this case we use a padding of 5px and a white background to get the white ‘photo paper’ effect. A 1px grey ‘outer’ border is added as well. We think it works best by floating the <div> left. There’s no need to give the <div> a width/height when it contains an image. In fact this can cause cross-browser inconsistency in some cases – so we leave it out.

That’s it! Here’s the final effect:

Lime

You can also give the .photo class values for its top/left/bottom/right margins if you want to adjust the image position. In fact, that what we have done here.

Another option is to use different colour values for the top/left borders which can give a slightly 3D effect.

» View actual image used.

Try different things to get the effect you want!

Related Posts

Comments

Textile Help
Stop looking at my bottom