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;
}
Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.
Bookmark or Share this Post!
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,
Try this one:
View Demo
.img-desc p { float: left; background: #111; -moz-opacity:.55; filter:alpha(opacity=55); opacity:.55; color: #fff; position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px 0; margin: 0; border-top: 1px solid #999; } .img-desc p span { float: left; padding: 5px 20px; }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
ya really nice
Great stuff. I’m trying it with the modification to work with images of any width. Only problem is when I try to add padding so that the text flowing around it is not right against the image. When I do this the transparent caption extends into the padding. Any thoughts?
Hey David~
Check out this Demo.
Instead of using <cite>, I used <p><span> this time. There was a padding issue and it was getting cut off by the overflow:hidden;
Let me know if this was the issue you were having, if not can you please provide a sample link?
Thanks for posting this! These are easy and will really put a polish on some pages I have that are pretty bland.
Soh,
Thanks for the demo but didn’t do the trick. I’ll send you a link as soon as it’s live. The problem comes when adding:
img { padding-right: 10px;)
so the text flowing around will have a little room. Then the transparent overlay also covers the padding.
If I modify the width:100% to say 95% it works, but of course that removes the ability to fit all image widths.
Oh, I think I was misunderstanding you David :-p
Did you mean you just want a margin so the outer paragraph text is not butting up to the image? If so, instead of adding a padding, you should switch to a margin~
hehe but I think a link would solve this confusion, Ill just hang loose for your link
Thanks!
I have one question about the use of shadow in the images of my blog posts: if they have different sizes is there a way to make the “shadow” match the image size with coding?
Thank you!
If your asking about making the shadow effect fully liquid, yes there is a way. But the most simplest way is to use just one image that is big enough to cover most image sizes used on your website. Were you having trouble getting the shadow effect on your blog? Let me know, thanks~
Wow, this is a fantastic post, I have learnt a great deal from this, and will be doing some of these techniques in my upcoming websites.
Thanks
Great site.
In the caption demo, is there a way to make the text not transparent ?
Hey Passie!
I would first take off the transparency in the CSS, then add a 1×1 transparent png background stretching/repeating in the background. That would be the easiest way in my opinion~
Nice tips, especially image with caption.
Nice tips. I am gonna apply it on my websites.
thanks
Hello
I try it with success with firefox or safari but with IE there are some problems
look the test on this page : http://www.phonethik.com/spip.php?page=une
thank for your help
Hey Dan, I would try to take out the div wrapping your image description (inside of the p and span tag) and replace it with a strong tag (any inline element). That should get you closer to where you need to be~
Thank you Soh, it’s perfect !
Great image effect (borders) I have not had a chance to try any more yet but many thanks.
Love the theme too Soh.
K
Useful post. I already use most of these techniques, but it’s good to know the other options.
Thanks
Hello Soh,
All effects are really superb, thanks
I’ve used image shadow effect from here and its working really great.
but i’ve a little problem. I need drop shadow all around the image, means at every side of image. there are lot of images and size of every image is different and i need only single class to give effect at these all images. So is it possible to make shadow at every side of image.
i like double border effect every time i see image with grey double border i was ask my self how they do that