5 Ways to Spice up Your Images with CSS

Blog » CSS/XHTML » 5 Ways to Spice up Your Images with CSS

5 Ways to Spice up Your Images with CSS

PrintDecember 1st, 2008

Here are a few simple tricks to add some flavor to your typical bland images. Using Photoshop to style each image can be tedious and difficult to maintain in the long run. These following CSS techniques will help you ease that pain! If you have some of your own techniques, please share them!

Drop Shadow Effect

Add a drop shadow by using a background image with some padding.

HTML

<img class="shadow" src="sample.jpg" alt="" />

CSS

img.shadow {
	background: url(shadow-1000x1000.gif) no-repeat right bottom;
	padding: 5px 10px 10px 5px;
}

Double Border Effect

This technique is probably the most common one out there right now. We create the double border effect by doing the following:

HTML

<img class="double-border" src="sample.jpg" alt="" />

CSS

img.double-border {
	border: 5px solid #ddd;
	padding: 5px; /*Inner border size*/
	background: #fff; /*Inner border color*/
}

Framed Image Effect

Best described on www.webdesignerwall.com, this technique basically layers a transparent image on top to create this effect. For those who need to get around the IE6 PNG issue, check out my tutorial here for details.

HTML

<div class="frame-block">
	<span>&nbsp;</span>
	<img src="sample.jpg" alt="" />
</div>

CSS

.frame-block {
	position: relative;
	display: block;
	height:335px;
	width: 575px;
}
.frame-block span {
	background: url(frame.png) no-repeat center top;
	height:335px;
	width: 575px;
	display: block;
	position: absolute;
}

Watermark Effect

You can add a watermark effect by lowering the opacity of the main image and allowing the background image to seep through. *Note this is just for the visual effect - To implement the protection check out the CSS Watermark Tutorial.

HTML

<div class="transp-block">
	<img class="transparent" src="sample.jpg" alt="" />
</div>

CSS

.transp-block {
	background: #000 url(watermark.jpg) no-repeat;
	width: 575px;
	height: 335px;
}
img.transparent {
	filter:alpha(opacity=75);
	opacity:.75;
}

Image with Caption

Add a quick caption using absolute positioning and transparency.

HTML

<div class="img-desc">
	<img src="sample.jpg" alt="" />
	<cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div>

CSS

.img-desc {
	position: relative;
	display: block;
	height:335px;
	width: 575px;
}
.img-desc cite {
	background: #111;
	filter:alpha(opacity=55);
	opacity:.55;
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 555px;
	padding: 10px;
	border-top: 1px solid #999;
}
Bookmark or Share this Post!
Digg del.icio.us StumbleUpon Technorati TwitThis E-mail this story to a friend!

Tags:

This entry was posted on Monday, December 1st, 2008 at 9:40 am and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

27 Responses to “5 Ways to Spice up Your Images with CSS”

  1. Martin

    Wow these look really great. I think a lot more people should use the caption one. It’s really useful.
    Thanks again :)

  2. Lymorn

    I’m impressed, it work’s on IE.
    I tried to set background for images, but it didn’t work the way I was expecting.
    It’s good to know that now it work’s correctly.

  3. Swizec

    I do the caption one differently, that is, replace positioning with margins and abuse position: absolute just to get it to float above the image.

    This is because absolutely positioned elements are, correctly, displayed positioned according to browser borders, not parent element borders and you can get yourself into trouble quickly actually positioning an absolutely positioned element.

    *adds blog to RSS*

  4. Kaan

    Nice work

  5. Tay

    Hey, great article!

    It’s amazing how far a little polish on certain elements can go to creating a really professional finish.

    Fantastic site by the way…

  6. Mark

    Neat tricks, the only one that I’d caution people on is the watermark effect as it is not a true watermark and people can easily save an unmarked file via right click menu or a spider script. A true watermark (or flash type app) protects the image.

  7. Citizen Z

    The use of -moz-opacity is unnecessary unless you’re trying to support Firefox 0.8. (See the notes here.)

  8. wallpapers

    love the watermark example - very useful - thx

  9. Stormy Seas Photography

    Excellent post. Photography sites , including my own can benefit from this post.

    Thanks,

    Stormy Seas Photography
    http://www.stormyseasphotography.com

  10. Ben Grace

    Nice site. Great set of tools, especially the caption one.

  11. david

    hey, these are some nifty tricks … i particularly like the caption effect.

    however, the watermark is virtually useless. it might deter someone from stealing the image, but anyone who makes the effort to right click and save, will quickly learn that the watermark is only superimposed onto the image.

    none the less, thanks for sharing! :)

    cheers

    david
    http://www.davidsmeaton.com

  12. Soh

    Thank you all for the feed back :-)

    Swizec:
    Thanks for your tips on absolute positioning :-) I’ll definitely look out for that.

    Citizen Z:
    Thanks for the -moz-opacity tip, taking them out now!

    For those who would like to take the water mark effect a step further please check out my CSS Watermark Tutorial, although its not 100% steal proof, its a step further than this example above~

    Thanks again everyone :-)

  13. Nicholi

    These are great. The caption on the image looks nice. But how would I do it with several images with different widths?

  14. Lee

    I have been trying to do this for some time. Thank you for the tips.

  15. Soh

    Hey Nicholi,

    I would just ditch the fixed width, the parent class would just have an overflow:hidden, and a float. The child cite tag would just have a 100% width to stretch across the parent width.

    View Demo

    .img-desc {
    	position: relative;
    	overflow: hidden;
    	float: left;
    }
    .img-desc cite {
    	background: #111;
    	filter:alpha(opacity=55);
    	opacity:.55;
    	color: #fff;
    	position: absolute;
    	bottom: 0;
    	left: 0;
    	width: 100%;
    	padding: 10px;
    	margin: 0;
    	border-top: 1px solid #999;
    }
    
  16. ahmei

    hey fantastic job! Appreciate it.

  17. G Dey

    Very nice and useful post.

    I am using the shadow trick in my ebay listings and since EBAY doesn’t support DOCTYPE, so it doesn’t work in IE but it is fine in Firefox.

    Can someone help me as how to fix that for IE ?

  18. woot

    Average

  19. IIssNan

    Nice tricks!
    Can I translate this article into chinese?
    thanks.

  20. ponie325

    GREAT WORK!~
    very useful to me!~
    3Q~

  21. Harry Roberts

    Some nifty stuff there, although cite is probably the wrong element to use unless you are citing something. Some captions may be citations from other sources, but not all. Picky I know, but I reckon a span would be the better element to use…

  22. David Hucklesby

    You’ll need to add a new declaration for opacity to work in IE 8. See here.

  23. Jon Haarstad

    Excellent collection of styling options. This sure beats the need to design things image by image. I really like your caption style… Great stuff.

  24. got my thumbs up.

    Works a treat.

  25. zrce

    wow thats great!

  26. techappeal

    Hi, i wanted to use your drop shadow method on my web site, but i just dont know how the background image “shadow-1000×1000.gif” needs to look like thank you and i will wait for your response

  27. Soh

    Hey Techappeal, here is the link to the drop shadow image.

    http://www.sohtanaka.com/web-design/examples/drop-shadow/shadow-1000×1000.gif

    Nothing fancy here, just a white square with a 5px drop shadow with the opacity set to 25% :-)

    Thank you all for the feedback :-)

Speak Your Mind…

Need to post HTML code?
Use Postable for your convenience.

Don't have an Avatar?
Set up a Gravatar image now!

Blog Blog Categories

Popular Comments Popular Posts

Recent Comments Recent Comments