Pure CSS Rollover Image Carousel
TweetThis 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.
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
No comments.
Comments are currently closed