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

Tags: ,

Leave a Reply