When you see an image on the webpage, when you move the mouse over the image (hover the mouse over the image), the image becomes grayed out, seemingly changing color. Actually, the image is set to a translucent style by CSS.
1. 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}
The hover pseudo-translucent effect is set for images in the hyperlink in the DIV object box.
2. HTML code
The css mouse goes through the image, and the image is dimmed and transparent.
Code comment:
Filter: sets the IE translucent effect style of the platform. The value ranges from 1 to 100. The smaller the value, the more transparent the system is. Set the transparent usage before IE8.
Opacity: sets the IE translucent effect style. The value ranges from 0.1 to 1. The smaller the value, the more transparent it is. The later version of IE8 is used transparently.
-Moz-opacity is used to set non-IE browsers, such as Firefox, with the same syntax as IE.
Complete instance:
The css mouse goes through the image, and the image is dimmed and transparent.
Online operation