5 Ways to Spice up Your Images with CSS
Blog » CSS/XHTML » 5 Ways to Spice up Your Images with CSS5 Ways to Spice up Your Images with CSS
December 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> </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;
}
Related Posts
Tags: Tutorial
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.
Popular Posts
Recent Comments
Wow these look really great. I think a lot more people should use the caption one. It’s really useful.
Thanks again
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.
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*
Nice work
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…
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.
The use of -moz-opacity is unnecessary unless you’re trying to support Firefox 0.8. (See the notes here.)
love the watermark example - very useful - thx
Excellent post. Photography sites , including my own can benefit from this post.
Thanks,
Stormy Seas Photography
http://www.stormyseasphotography.com
Nice site. Great set of tools, especially the caption one.
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
Thank you all for the feed back
Swizec:
I’ll definitely look out for that.
Thanks for your tips on absolute positioning
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
These are great. The caption on the image looks nice. But how would I do it with several images with different widths?
I have been trying to do this for some time. Thank you for the tips.
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; }hey fantastic job! Appreciate it.
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 ?
Average
Nice tricks!
Can I translate this article into chinese?
thanks.
GREAT WORK！~
very useful to me!~
3Q~
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…
You’ll need to add a new declaration for opacity to work in IE 8. See here.
Excellent collection of styling options. This sure beats the need to design things image by image. I really like your caption style… Great stuff.
Works a treat.
wow thats great!
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
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