How to use CSS to make the image gray when the mouse is hovering over it

We often see such an effect on web pages. When your mouse moves over the picture, the picture turns gray or darker. This is actually because the picture is set to semi-transparent by CSS. style. Let me give you an example to see how to achieve this effect.

a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}

The effect of this CSS code is to set the mouse to move to Ahyperlink, so that the image (img) in the hyperlink becomes semi-transparent. Shows 80% effect.

Explanation:

filter sets the platform IE semi-transparent effect style, the value is 1-100, the smaller the value, the more transparent it is. To set the transparency before IE8, use

opacity to set IE semi-transparent effect. Transparency effect style, value 0.1-1, the smaller the value, the more transparent. To set the transparency of IE8 and later versions, use

-moz-opacity. For non-IE browser settings, such as Firefox, the syntax is the same as Same as IE

This setting of CSS style opacity and filter is not supported in IE6. Because the share of IE6 version has declined sharply, IE6's support for this CSS is generally not considered.

Move the mouse when the picture changes color and the picture is translucent Example

Example case description: Set up two DIV boxes, put a picture in each of the two boxes, and set the mouse to hover ( :hover), the image translucency is 80% and 70%, and observe the 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}

Here is set the hoverpseudo-classtranslucent effect for the image in the hyperlink in the DIVobject box .

2. Key HTML code

<p>鼠标移动到图片悬停时，图片变色滤镜效果：</p> 
<p class="p1"><a href="#"><img src="images/p-a-bg.png" /></a></p> 
<p class="p2"><a href="#"><img src="images/an.gif" /></a></p>

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Common methods of organizing native js

##How to use Vue+CSS3 to create interactive effects

Detailed explanation of front-end responsive layout, responsive images, and self-made grid system

The above is the detailed content of How to use CSS to make the image gray when the mouse is hovering over it. For more information, please follow other related articles on the PHP Chinese website!