When hovering over a block, I want it to be illuminated from all sides, but this does not work because the neighboring blocks are superimposed on the backlight (in the picture below and on the left). enter image description here

#square { width: 100px; height: 100px; float: left; background-color: red; } #square:hover { box-shadow: 0px 0px 10px #F0FFF0; } #workspace { width: 800px; height: 1200px; background-color: white; margin-left: auto; margin-right: auto; margin-top: 20px; } 
 <div id="workspace"> <div id="square"></div> <div id="square"></div> <div id="square"></div> ... <div id="square"></div> <div id="square"></div> </div>

  • id must be unique. Classes are used to repeat styles. - Gleb Kemarsky pm

2 answers 2

 box-shadow: 0px 0px 20px #F0FFF0 inset;

example

    Add:

      #square { z-index: 0; position: relative; } #square:hover { z-index: 1; }

    PS: in my id use a bad idea, it is better to make classes.

    • In general, going to use, this is a mistake, on each separate page it is impossible to duplicate the ID, the ID should be unique ... - Ivan Karaman