The css mouse goes through the image, and the image is dimmed and transparent.

Source: Internet
Author: User
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.