CSS3-Image-Techniques

Oval Vinyl Gazebo — Countrysdie Gazebos Canada … Built to last.

Grand Wood Gazebo — Countrysdie Gazebos Canada … Built to last.

The HTML

The markup makes use of the new HTML5 figure element with three images (with links per Flickr’s embedded image requirements) and a figcaption element.Naturally you could use plane Jane div elements.

<figure>
	<a href="#"><img src="..." alt="Poppy&rsquo;s Mean Face" /></a>
	<a href="#"><img src="..." alt="Poppy&rsquo;s Mean Face" /></a>
	<a href="#"><img src="..." alt="Poppy&rsquo;s Mean Face" /></a>

	<figcaption>
		<p>Poppy&rsquo;s mean face &hellip; It never gets old.</p>
	</figcaption>
</figure>

The CSS

There are a few things going on with the photographs. First of all, we are making use of the CSS3 border-image property on the images themselves. This is how the rough edged paper with drop shadow border is applied.

Next, we set the position properties of the images to absolute so they stack on top of each other. In the example we’re letting the stack default to where the images appear in the markup.

We then rotate the images using the CSS3 rotate property. Targeting the images with CSS2 child and adjacent selectors, we apply some additional positioning and adjustments to each subsequent image for a randomized look.

Finally, we set a :hover state to the images so that they are visible when moused over. The z-index property is set to 9999 to ensure the hovered image appears on top, and the rotate property is set to 0deg.

Bonus! We have also animated the rotation of the :hover state with the new transition property.

*For brevity, I have omitted vendor prefixes in the following code snippet:

figure {
	height: 280px;
	padding: 15px;
	position: relative;
	width: 320px;
}
figure img {
	border-image: url('img/texture.png') 20 20 20 20 round round;
	border-width: 15px;
	left: 20px
	position: absolute;
	transform: rotate(-2deg);
}
figure > a + a img {
	left: 20px;
	top: 30px;
	transform: rotate(-6deg);
}
figure > a + a + a img {
	left: 50px;
	top: 50px;
	transform: rotate(-10deg);
}
figure > a:hover img {
	transform: rotate(0deg);
	transition: all 0.1s ease-in-out; /* Bonus animation! */
	z-index: 9999;
}