Latest web development tutorials
 

CSS Image Opacity / Transparency


Creating transparent images with CSS is easy.

The CSS opacity property is a part of the 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:

klematisalpha(opacity=40)">

Look at the following CSS:

Example

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

The opacity property can take a value from 0.0 - 1.0. The lower value, the 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 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.


Example 3 - Text in 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 {
    background: url(/css/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>
Try it Yourself »

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.


Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »