How does the CSS implement the auto-shadow effect when the mouse moves to the div block?

When we browse the major websites, we can click on the images to enlarge, rotate, and so on. This effect can really make a person's eyes bright, also may bring the user clicks the traffic. Of course, powerful CSS features are more than just such effects. This article will introduce a more cool effect that is when the mouse moves into the div block generated by the CSS shadow effect, so that you can immediately create three-dimensional sense.

The CSS shadow effect specific code example is as follows:

  <style>        . shadow{            float:left;            margin-left:20px;            Background: #EEFF99;            width:200px;            height:400px;        }        . shadow:hover{            -webkit-box-shadow: #ccc 0px 10px 10px;            -moz-box-shadow: #ccc 0px 10px 10px;            Box-shadow: #ccc 0px 10px 10px;  }    </style>
The above code tests the effects of CSS shaded borders such as:


Note: Whether to add shadow to that element is inseparable from an important attribute: hover pseudo-class.

: The hover pseudo-class adds a special style to this element when the mouse is moved over the element. As long as you have mastered the use of this hover, whether it is to the div block or picture and shadow can easily achieve this effect.

This pseudo-class is an element where the application is in "hover state". Hover is defined as the user indicates an element but does not activate it. The most common example of this is moving the mouse pointer within the bounds of a hyperlink in an HTML document. In theory, other elements can also be in hover state, but CSS does not define exactly which elements.

"Recommended for the relevant content"

How to use CSS in the page to make the image have three-dimensional effect? (code measured)

HTML5 Speed 3D Stereoscopic photo album switch effect