5 Ways to Spice up Your Images with CSS

5 Ways to Spice up Your Images with CSS

5 Ways to Spice up Your Images with CSS

 

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 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 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

HTML

<div>
	<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>
	<img 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>
	<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;
}

You may also like...

1 Response

  1. November 6, 2011

    […] I wanted to replicate with my own version and style. This is an add-on to my previous articles “5 Ways to Spice up Your Images with CSS ” and “CSS Vertical Navigation with Teaser“, a little combination of both […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>