Chapter 3 ■ CSS3 tranSitionS for imageS
Listing 3-25. A Linked Card Fan Gallery
If you want to rotate the first and second images and leave the photograph on top unaltered, change the
following selector:
div#cardfan:hover img:last-child
todiv#cardfan:hover img:nth-child(2n)
You could also rotate the default position of the images slightly to allow the user some understanding of
what is to come, as shown in Listing 3-26.
Listing 3-26. A Visually Hinted Card Fan Gallery
#cardfan img:first-child {
transform: rotate(6deg);
}
#cardfan img:nth-child(2n) {
transform: rotate(−6deg);
}
You could also link the photographs individually to the gallery example at the beginning of this chapter
(see Listing 3-27).
Listing 3-27. A Card Fan Gallery with Individually Linked Images
However, if you link the images individually you will need to change your CSS, as the organization of your
markup has changed. Rather than referencing them as children, you’ll reference the images through the value of
their src attribute (see Listing 3-28).