Hover Effect on Images From Different Directions Using Pure CSS

While I’ve demonstrated many “popup” caption techniques in the recent past, of late there’s been a UI trend in which moving your mouse over an element from different directions (from above, from below, etc) will cause an overlay transitioned in from the same vector. You can see the effect on the two images above: try moving your mouse upwards into the images of David Bowie (celebrating his 66^th birthday this week) and Iman. You can also experiment with mouse movements from the left, right, and above.

We can achieve this effect using just CSS and a little bit of clever markup; if you wanted to use the same technique on many elements at once, I would recommend automating the generation of extra DOM elements with JavaScript, an approach I’ll cover in the weeks ahead.

To start with, the basic markup: to keep things simple, I’ll use just the example of Iman Abdulmajid above; the font is Raleway by Matt McInerney.

Naturally, the overlay span elements could contain any content you wished: here we’re using text, but UI elements or other images could also be possibilities.

Now we’re going to position the div relative, and the span elements within it absolute:

(Note that you would need to add vendor prefixes on the transition code to support older versions of Firefox and other browsers).

Next, we want to move each span element so that it lies just within the inner edge of the containing div. We’ll do this by placing each span with percentages, measured off the div. At the same time, we’ll give each a different background color. We’ll do this using the nth-child selector:

If you had enough space on your page, you’d see the arrangement of the spans and central image currently looks like the figure shown above.

Next, we need to “clip” the div such that only the inner edges of each span are over the image:

Finally, we need to hide the span elements (using opacity) and make them reappear (and cover the complete div) after hover. We’ll use a variation of nth-child to do so:

A few observations:

• Particularly swift mouse movements from outside the image into its interior may not trigger a transition, due to the fact that such motions pass over the invisible hover area of the span elements too quickly; this can be balanced by applying more inset to the span elements to provide them with larger “hit” areas, with the downside of adding the drawbacks discussed below.

• A lower inset percentage (say ±70%) will provide more opportunities for capturing mouse motion, at the cost of two side effects: momentary dual transitions are more likely to be triggered (as the invisible overlap of the spans at the corners of the image is greater) and every animation will appear to start a little sooner.

• As coded here, this technique has limited utility on mobile devices: it will not be obvious to users that they should swipe over the edges of the image to trigger the rollovers. An improved approach would be to increase the inset of the spans to ±40% within a media query for mobile devices, providing more opportunity for the transitions to occur on tap/press.

• Accessibility could be improved: for users with different needs, I would suggest placing the text of the span elements in a longer sentence for the alt value or longdesc of the image.

• If you're interested in more, a very nice alternative approach to this technique was swiftly coded by @thebabydino.