I have a unique collection of images that are styled to resemble polaroid pictures.
Each image is given a slight rotation.
a.polaroid {
transform: rotate(-2deg);
}
On hover, a scale transformation is applied.
a.polaroid:hover {
transform: scale(1.15);
}
Everything was going smoothly until extra styling was added to modify the default rotation for specific images, such as all even images or every 3rd image.
/* Rotate all even images by 2 degrees */
li:nth-child(even) a.polaroid {
transform: rotate(1deg);
}
/* Remove rotation from every 3rd image */
li:nth-child(3n) a.polaroid {
transform: none;
}
Interestingly, these additional styles seemed to prevent the hover effect from working on any image affected by them - including every even image and every 3rd image.
Any thoughts on why this might be happening?
You can view the related fiddle http://jsfiddle.net/46sdd/
An updated fiddle with the solution can be found here: http://jsfiddle.net/46sdd/3/