Module Prestashop, Module Opencart, Plugin Woocommerce, Plugin Wordpress

Extension Prestashop, Extension Opencart, Module Woocommerce, Module Wordpress

Plugin Prestashop, Plugin Opencart, Addon Prestashop

Hover and click trigger

  • Hover and click trigger

Applying a :hover pseudo-class to an element is widely known as the classic “hovering” over an element on a web page. A problem that arose with the introduction of the border-radius property is the non-realistic triggering of the hover event when entering the bounding box of the element and not just the actual visible area. This becomes extreme when we create a circle by setting the border-radius of a square to 50% (half of its outer width and height).

Today we want to share one possible solution to the circle hovering problem. We’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box.

This animation is my attempt to recreate the. It starts with gray images. When you hover over an image, you have simultaneously the color image sliding up and a div with a text description sliding down.

Published on 2013-08-10

COMMENTS

No customer comments for the moment.

Add a comment