How to use CSS to hover your mouse over a picture to turn gray

We often see such an effect on the Web page, when your mouse moves to the picture, the picture is dimmed, or dimmed, this is actually the picture is set to the CSS translucent style. Let's give you an example to see how this effect can be achieved

A:hover Img{filter:alpha (opacity=80);-moz-opacity:0.8;opacity:0.8;}

This CSS code functions when you set the mouse to move to a hyperlink, the hyperlink inside the Picture (IMG) renders a translucent 80% effect.

Explain:

Filter set platform IE translucent effect style, value 1-100, the smaller the value is transparent, set IE8 before the transparent use

Opacity set the IE translucent effect style, the value 0.1-1, the smaller the value is transparent, set the IE8 later version of the transparent use

-moz-opacity to non-IE browser settings, such as Firefox, the same syntax as IE

This setting CSS style opacity, filter is not supported in IE6, because the IE6 version now has a sharp decline, so IE6 generally do not consider the support of this CSS.

Mouse move to picture color, picture Translucent instance

Example Case Description: Set two div box, two boxes into a picture, by setting the mouse hover (: hover) When the picture is translucent to 80% and 70%, observe its effect.

1. Key CSS Code

. p1,.p2{width:500px; margin:20px auto}. p1 a:hover Img{filter:alpha (opacity=80);-moz-opacity:0.8;opacity:0.8}. P2 A: Hover Img{filter:alpha (opacity=70);-moz-opacity:0.7;opacity:0.7}

This sets the hover pseudo-class translucency effect on the image set in the hyperlink inside the Div object box.

2. Key HTML code

<p> mouse move to picture hover, picture color filter effect:</p> <p class= "P1" ><a href= "#" > </a></p> <p class= "P2" ><a href= "#" ></a></p>

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

Common methods of native JS collation

How to do interactive effects with VUE+CSS3

Detailed front-end responsive layouts, responsive images, and self-made grid systems