X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

CSS Image Opacity / Transparency


Creating transparent images with CSS is easy.

The CSS opacity property is a part of the W3C CSS3 recommendation.


Example 1 - Creating a Transparent Image

The CSS3 property for transparency is opacity.

First we will show you how to create a transparent image with CSS.

Regular image:

klematis

The same image with transparency:

klematis

Look at the following CSS:

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent.

IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.


Example 2 - Image Transparency - Hover Effect

Mouse over the images:

klematis klematis

The CSS looks like this:

Example

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

Try it yourself »

The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hover over one of the images. In this case we want the image to NOT be transparent when the user hover over it.

The CSS for this is: opacity=1.

IE8 and earlier: filter:alpha(opacity=100).

When the mouse pointer moves away from the image, the image will be transparent again.


Example 3 - Text in Transparent Box

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

The source code looks like this:

Example

<html>
<head>
<style>
div.background {
    width: 500px;
    height: 250px;
    background: url(klematis.jpg) repeat;
    border: 2px solid black;
}

div.transbox {
    width: 400px;
    height: 180px;
    margin: 30px 50px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
    margin: 30px 40px;
    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.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.
    This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

Try it yourself »

First, we create a div element (class="background") with a fixed height and width, a background image, and a border. Then we create a smaller div (class="transbox") inside the first div element. The "transbox" div have a fixed width, a background color, and a border - and it is transparent. Inside the transparent div, we add some text inside a p element.



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates FREE Website Templates Free HTML Templates

SHARE THIS PAGE

facebook