Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

Example Analysis of Hover effect of Image Transparency in CSS

2025-01-16 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

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!

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report