Example Analysis of Hover effect of Image Transparency in CSS

Xiaobian to share with you the CSS image transparency Hover effect example analysis, I believe most people still do not know how, so share this article for everyone's reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

Move the mouse pointer over the image:

CSS is like this:

img{opacity:0.4;filter:alpha(opacity=40); /* for IE8 and earlier */}img:hover{opacity:1.0;filter:alpha(opacity=100); /* for IE8 and earlier */}

The first CSS code block is similar to the code in Example 1. In addition, we've configured the setup to look like when the mouse pointer is over the image. In this example, when the pointer moves over the image, we expect the image to be opaque.

The CSS is opacity=1.

IE8 and earlier dabblers: filter:alpha(opacity=100).

When the mouse pointer moves out of the image, the image is colorless again.

The above is "CSS image transparency Hover effect sample analysis" All the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!