Opacity Archives - Ebhor.com

CSS Opacity

January 12, 2020July 26, 2018 by manish

Transparency of elements on the web-page can be used to imply their state, notify some change or just as a styling effect. The opacity property can help us alter the transparency of the element. We can set values in the range 0.0 – 1.0 where 0 being completely transparent.

     div {
            background-color: red;
            padding: 10px;
            margin-bottom: 10px;

        }

        .opacity10 {
            opacity: 1;
            filter: alpha(opacity=100);
            /* For IE8 and below */
        }

        .opacity9 {
            opacity: .9;
            filter: alpha(opacity=90);
            /* For IE8 and below */
        }

        .opacity7 {
            opacity: .7;
            filter: alpha(opacity=70);
            /* For IE8 and below */
        }

        .opacity5 {
            opacity: .5;
            filter: alpha(opacity=50);
            /* For IE8 and below */
        }

        .opacity4 {
            opacity: .4;
            filter: alpha(opacity=40);
            /* For IE8 and below */
        }

        .opacity2 {
            opacity: .2;
            filter: alpha(opacity=20);
            /* For IE8 and below*/
        }

        .opacity1 {
            opacity: .1;
            filter: alpha(opacity=10);
            /* For IE8 and below */
        }

div {

background-color: red;

padding: 10px;

margin-bottom: 10px;

}

.opacity10 {

opacity: 1;

filter: alpha(opacity=100);

/* For IE8 and below */

}

.opacity9 {

opacity: .9;

filter: alpha(opacity=90);

/* For IE8 and below */

}

.opacity7 {

opacity: .7;

filter: alpha(opacity=70);

/* For IE8 and below */

}

.opacity5 {

opacity: .5;

filter: alpha(opacity=50);

/* For IE8 and below */

}

.opacity4 {

opacity: .4;

filter: alpha(opacity=40);

/* For IE8 and below */

}

.opacity2 {

opacity: .2;

filter: alpha(opacity=20);

/* For IE8 and below*/

}

.opacity1 {

opacity: .1;

filter: alpha(opacity=10);

/* For IE8 and below */

}

Run Hover Effect One of … Read more