CSS OPACITY / TRANSPARENCY

The opacity quality in CSS defines how transparent of an element (image or text).

EXAMPLE

img {

opacity: 0.5;

filter: alpha(opacity=50); /* For IE8 and earlier */

}

TRANSPARENT HOVER EFFECT

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

EXAMPLE

img

{

opacity: 0.5;

filter: alpha(opacity=50); /* For IE8 and earlier */

}

 

img:hover {

opacity: 1.0;

filter: alpha(opacity=100); /* For IE8 and earlier */

}

TRANSPARENT BOX

When using the opacity quantity to add transparency to the background of an element, all the elements are derived form transparency. This can make the text inside a fully transparent element hard to read.

EXAMPLE

div {

opacity: 0.3;

filter: alpha(opacity=30); /* For IE8 and earlier */

}

TRANSPARENCY USING RGBA

This is an RGB color with a fourth parameter include a number. Which is the alpha transparency channel? rgba(_red_, _green_, _blue_, _transparency_); Semi-transparent RGBa colors can be applied anywhere in CSS where a color is commonly used.

EXAMPLE

div {

background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */

}

TEXT IN TRANSPARENT BOX

Use the text tool to add words to negative space in a photo or layer them on top of your photos’ subject.

First, we create a <div> element (class=”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.

EXAMPLE

<html>

<head>

<style>

div.background {

background: url(klematis.jpg) repeat;

border: 2px solid black;

}

 

div.transbox {

margin: 30px;

background-color: #ffffff;

border: 1px solid black;

opacity: 0.6;

filter: alpha(opacity=60); /* For IE8 and earlier */

}

 

div.transbox p {

margin: 5%;

font-weight: bold;

color: #000000;

}

</style>

</head>

<body>

 

<div class=”background”>

<div class=”transbox”>

<p>This is some text that is placed in the transparent box.</p>

</div>

</div>

 

</body>

</html>