Image opacity in CSS Code

Opacity style in CSS specifies how transparent an element is!

We can apply opacity on any element using CSS, but normally we see example of image, div tag etc, here we use CSS opacity style to set the opacity level for any HTML element.

Here we have given two different examples of setting image opacity in css to different images, We have kept two different opacity levels, so you can understand the difference

opacity: 0.3;
filter: alpha(opacity=30)

opacity: 0.6;
filter: alpha(opacity=60)

On mouseover we can change the image opacity to give some cool effect. here is code for changing opacity on mouseover

<style>
#img1 {
    opacity: 0.3;
    filter: alpha(opacity=30);
    width: 98%;
}
    #img1:hover {
        opacity: 1.0;
        filter: alpha(opacity=100);
    }
#img2 {
    opacity: 0.6;
    filter: alpha(opacity=60);
    width: 98%;
}
    #img2:hover {
        opacity: 1.0;
        filter: alpha(opacity=100);
    }
</style>

Remember when using the opacity property to add transparency to the background of any element, all of its child elements will become transparent as well. This will make the inner content fully transparent element, thus will be hard to read.

But there is way to keep the child element non transparent,
use background: rgba(10, 115, 219, 0.3);

this is how the result will look like

Here is an example of you can set opacity using css code.

div.first 
    {
        background: rgba(10, 115, 219, 0.1);
    }
div.second
    {
        background: rgba(10, 115, 219, 0.3);
    }
div.third
    {
        background: rgba(10, 115, 219, 0.6);
    }

Note: Opacity is not inherited property, but if the parent element has opacity that applies to everything within it. You cannot make any child element less transparent than the parent element.