CSS3 Image Opacity - Image transparency effect

 CSS3 Image Opacity picture transparency is CSS3 recommended new features can be easily used to adjust the transparency of the picture page, CSS3 Image Opacity picture transparency is the use of design skills CSS3 the opacity standard attributes, if coupled with CSS hover action Judging, it is possible to create a special effect that automatically produces a difference in transparency when the mouse is moved to the top of the image. The new mainstream browsers all support CSS3 Image Opacity.

CSS3 Image Opacity Image transparency effect example 1. Pure image transparency adjustment

<style>
#Img0{
    opacity: 1.0; //Set to completely opaque
    filter: alpha(opacity=100); // IE8 and earlier versions
)
#Img1{
    opacity: 0.5; //Set transparency to 0.5
    filter: alpha (opacity=50); // IE8 and earlier versions
}
</style>
<img src="Image URL" id="Img0">
<img src="Image URL" id="Img1">

Example presentation effect

 

The example prepares a total of two pictures. The picture on the left uses the opacity property of CSS3 and the transparency is set to completely opaque, and the picture on the right is set to 0.5, which can also be said to be a translucent effect. In addition, we are in Img0 and Img1 Both use the filter attribute to enable earlier versions of IE browsers to smoothly produce transparent image effects. ➤ Adjusting the transparency range of CSS3 opacity from 0.0 to 1.0 has different effects. For detailed usage, please refer to: CSS3 opacity property (transparency effect) CSS3 Image Opacity Image transparency effect example 2. Adding action transparency change

<style>
#Img3{
    opacity: 0.5; //Set the transparency to 0.5
    filter: alpha(opacity=50); // IE8 and earlier versions
)
#Img3:hover{
    opacity: 1.0; //Set to completely opaque
    filter : alpha(opacity=100); // IE8 and earlier versions
}
</style>
<img src="Image URL" id="Img3">

Example presentation effect

In the second example, the transparency change effect produced by moving the mouse over the image is to set the transparency to semi-transparent (opacity:0.5), and then use the hover action judgment function of CSS to set the transparency to completely opaque (opacity:1.0) ), you can create the effect of transparency changes produced by the mouse moving over the picture, which is also a technique that many new web designs will use.