5 advanced examples of hovering on images

The hover effects on images (which when the user hovers over an HTML element, in many cases an image, and is exhausted when the mouse is moved) have been for a long time one of the main factors of interaction between page and user.

But today, with the possibilities offered by modern client-side technologies, Web designers can really give free rein to creativity. In this article we see 5 animations of hovering on really original images. All snippets are viewable and testable on Code Pen .


1) Distribution in levels

The “levels” are the degrees of depth of an image, useful to break down the same image into several different components. Although this functionality is simple to implement with graphic tools, the same can not be said for HTML , CSS and Javascript . Alvaro Monotoro, however, thanks to an excellent combination of these three languages, has produced an animation that allows, at the user’s passage of the mouse, to highlight a level in a given image.

There are many possible combinations.

2) CSS3 filters

With the possibilities offered by CSS 3 , the presence of Javascript is often superfluous. It is necessary, however, to master all the most advanced dynamics, to implement a real substitution. In this snippet we observe a wise use of CSS3 filters that allow you to produce very catchy (and different) effects when hovering over the images.

3) Slide and Zoom

A combination of amazing combined CSS 3 effects : zoom in on the image in partnership with the sliding ! The user uses jQuery to make a toggle of the classes necessary for the production of the effect, but the final product can also be obtained through a Javascript Vanilla , keeping unchanged HTML and CSS.

4) Unfold and tooltip

Also in this case we have a combination of two different animations , whose final product is really nice, and can be applied to a series of HTML elements defined by the user.

Very minimal HTML layout :


combined with an advanced CSS and zero Javascript.

5) Shifting Reality

In this case we have the opposite factor: a single HTML container, zero CSS and a powerful Javascript for an effect that leaves no room for descriptions. View to believe.