I found this effect used on YouTube’s Google+ page and decided to duplicate it in CSS3: if you’re familiar with CSS, and are prepared to use a little CSS3 animation, the technique is not difficult to achieve at all. (Move your mouse over the image above to see the final version).

First, the images you wish to use in the fan need to be all the same size, so that they hide each other neatly when stacked.

Once you have all of your images the same size, place them inside a single <div> the same width and height as the images; I’ve given this div an id of cardfan.

<div id="cardfan">
	<img src="zen.jpg" alt="Zen">
	<img src="matera-italy.jpg" alt="Matera, Italy">
	<img src="tivoli-italy.jpg" alt="Tivoli, Italy">
</div>

(The height on the div is necessary to create space underneath it, as the photos will be positioned absolutely.) You may wish to use margin: 0 auto on the div to get it to the middle of the page.

div#cardfan {
	width: 300px;
	height: 201px;
	margin: 0 auto;
}

As all the images have the same dimension and will be given the same appearance, they can all be styled with a single descendant selector, to create a frame and drop shadow:

div#cardfan img {
	width: 300px;
	height: 201px;
	border: 18px solid #ffe;
	box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.2);
}

Together with the width on the <div>, this puts the images in a visual column. We want to stack them, so we’ll use position: absolute to do so:

div#cardfan img {
	width: 300px;
	height: 201px;
	border: 18px solid #ffe;
	box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.2);
	position: absolute;
}

Now to get the images to move. We only want to move two of the images: the one on top of the stack, and the one at the bottom. The image in the middle will be the centre of the “fan”, and doesn’t need to be animated. We can get to the first and last images by using first-child and last-child.

We want to initiate the animation by the user moving their mouse over the <div>, so the appropriate selector is:

div#cardfan:hover img:first-child {
	transform: rotate(12deg);
}

There’s no animation yet, just a single “jump”. Note that the image that is transformed is the one on the bottom, since it appears first in the code, and is thus the “first child” of the div.

Let’s apply the same rotate transform, but in the opposite direction, to the last-child:

div#cardfan:hover img:last-child {
	transform: rotate(-12deg);
}

When you move your mouse over the <div>, the first and last images will change, but they will move around their centers:

We want to change that point to be significantly below the images: think of the hands on a clock, or the hinge of a fan. We do this by giving new values to the transform-origin for our earlier declaration for all the images (again, I’ll show you just the final expected CSS spec version: you’ll have to repeat this with vendor prefixes to cover other browsers )

div#cardfan img {
	width: 300px;
	height: 201px;
	border: 18px solid #ffe;
	box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.2);
	position: absolute;
	transform-origin: center 600px;
}

This keeps the horizontal position of the origin point unchanged, but moves it down 600 pixels. (You may find that you’ll have to change the degree values for rotating the first and last images as a result).

Finally, we need to add animation: we don’t just want a “jump”. We’ll do so by adding a transition property to the declaration above:

transition: all .6s linear;

Because the effect is so quick, we don’t need any easing – I’ll provide an example of a more appropriate use of ease-in and out in an upcoming article.

That’s it: an animated card fan effect in effectively four lines of CSS.

Creative Commons licensed photos from Flickr, taken by Riccardo Cuppini.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/mapyf