'Highlight div element by darkening everything around it

I want to highlite a relativ positioned div element from a layer below, by making everything around it darker.

What I have tried:

  • Copy the position of the original element, and the element itself and then insert that element at the copied position
  • Construct the darker layer out of 4 rectangles so that this creates a negative rectangle, where the heart element I want to highlight shines through (picture 2)

Has anyone a really smart idea of how to achieve this? Both solutions, kind of work, but are really prone to errors.

enter image description here

enter image description here

javascripthtmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions