Shulou(Shulou.com)06/01 Report--

This article editor for you detailed introduction of "CSS how to achieve mouse hover picture grayed out", detailed content, clear steps, details handled properly, I hope this "CSS how to achieve mouse hover picture grayed out" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

First, DIVCSS5 introduction and description:

See the picture in the web page when the mouse moves over the picture (mouse hover over the picture) the picture turns gray, it looks like a discoloration and gray effect, but the picture is actually set to translucent by CSS.

2. Key CSS code: a:hover img {filter:alpha (Opacity=80);-moz-opacity:0.8;opacity: 0.8;}

This CSS code functions to set the translucent display effect of 80% of the picture (img) in the hyperlink when the mouse is moved over the A hyperlink.

Explanation:

Filter sets the translucency effect style of platform IE, with a value of 1-100. the smaller the value is, the more transparent it is. Set the previous transparent use of IE8.

Opacity sets the IE translucency effect style, with a value of 0.1-1. The smaller the value is, the more transparent it is. Set the transparent use of later versions of IE8.

-moz-opacity settings for non-IE browsers, such as Firefox, have the same syntax as IE

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

Third, the mouse moves to the picture color change, the picture translucency instance sets the mouse over (: hover) when the picture translucency is 80% and 70%, observe its effect.

1. Key CSS code

.div1, .div2 {width:500px; margin:20px auto} .div1 a:hover img {filter:alpha (Opacity=80);-moz-opacity:0.8;opacity: 0.8} .div2 a:hover img {filter:alpha (Opacity=70);-moz-opacity:0.7;opacity: 0.7}

The hover pseudo-class translucency effect is set for the images in the hyperlinks in the DIV object box.

2. Key HTML code

When the mouse moves to the picture hover, the picture discoloration filter effect:

3. Screenshot of effect comparison

Read here, this article "how to achieve CSS mouse over picture grayed out" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.