CSS Opacity

CSS Opacity / Transparency

The opacity property specifies the opacity/transparency of an element. The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

Example

Mony

opacity 0.2

Mony

opacity 0.5

Mony

opacity 1 (default)

Transparent Hover Effect

The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

opacity 1

Example explained

The first CSS block is similar to the code in our second example which is { opacity:0.5}. But in this case we added, what would happen when a user hovers over one of the images. In this case we want the image to NOT be transparent when the user hovers over it. The CSS for this is opacity:1;. When the mouse pointer moves away from the image, the image will be transparent again.

Transparent Box

When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read:

Examples of Text in Transparent Box

This is some text that is placed in the transparent box.

    •       
                    <!DOCTYPE html>	 
<html>
<head>
<style>
div.background {
    background: url(img/LOGO/1a.png) repeat;
    border: 2px solid black;
  }
  
  div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
  }
  
  div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
  }
</style>
</head>
<body>

<div class="background">
<div class="transbox">
<p>DAKTIVAH WORLD DAKTIVAH WORLD DAKTIVAH WORLD DAKTIVAH WORLD DAKTIVAH WORLD.</p>
</div>
</div>
</body>
</html>

    A </div>element was created and given a class named "background" with a background image, and a border. Then we create another </div> (class="transbox") inside the first </div>. The </div class="transbox"> have a background color, and a border - the div is transparent. Inside the transparent </div>, we add some text inside a <p> element

    Popular tags

    CSS Button CSS Gradient CSS Responsive CSS Transition CSS Gallery

    Dess App

    DessApp is an Integrated E-learning Education, Interactive and User-friendly features, smarter options and redefining your school costs effectively and efficiently.

    View
    1 1