Pure CSS Rollover Image Carousel

This might be useful for a list of search results where you want the ability to show more images without the distraction of using a full carousel.

View the demo

How is it made?

The list-items’ ::before pseudo-elements are used as hover areas divided, in this case, into fifths and positioned absolutely across the group.

On hover, the z-index of the list-item is set to be lower than those either side of it so they are then available to hover over.

The ::before psuedo-element of the <ul> is used to give a safe area in which to hover off so the first image can be seen again.

Tested in the latest versions of Chrome, Firefox, Safari and IE9

Add your comment

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