codescracker


css

CSS3 Image Opacity



« Previous Tutorial Next Tutorial »


CSS3 Opacity Effects

Opacity effects, introduced in CSS3, allow you to change the transparency of HTML elements using the opacity property. Using these effects, you can change the opacity of almost every element of an HTML document, such as buttons, text, or images.

The syntax to use the opacity property is as follows :

opacity: [number between 0-1];

Using the preceding syntax, if you define the opacity of an element as 0.5, it means the element will be 50% transparent. This property is supported by new versions of all major browsers. However, some older browsers require some custom code to use the opacity property. For instance, the older versions of Firefox browser use the -moz- prefix, the Chrome browser use the -webkit- prefix, and the Safari browser use either the -khtml- or the -webkit- prefix.

CSS3 Opacity/Transparency Example

The following code snippet shows an example of using the opacity property :

img {
opacity:0.6; }

In the preceding code snippet, we have to set the opacity of the IMG element to 0.6, i.e. 60%. It means that the element gets transparent by 60%. You can change the transparency of any HTML element by changing its opacity property.

The following code fragment shows the use of the opacity property for different browsers :

opacity: 0.5;
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
-khtml-opacity: 0.5;

Note - Internet Explorer does not support the opacity property. An alternate to use the opacity property on the Internet Explorer browser is given in the following code fragment :

filter:alpha(opacity=50);

The following code fragment shows the use of opacity property :

h1{ background:#036; opacity:0.0;}
h2{ background:#036; opacity:0.2;}
h3{ background:#036; opacity:0.4;}
h4{ background:#036; opacity:0.6;}
h5{ background:#036; opacity:0.8;}
h6{ background:#036; opacity:1.0;}

In the preceding code fragment, the opacity value 1.0 makes an element completely visible (opaque), while the opacity value 0.0 makes the element completely invisible.

CSS3 Image Opacity/Transparency

You can use CSS to create image opacity or transparency.

Create a Transparent Image using CSS3

Here is the normal image:

normal image

Here is the same image with transparency effect:

css transparent image

CSS3 Image Opacity/Transparency Example

Now let's look at the following example to know how to create transparent image using CSS3:

<!DOCTYPE html>
<html>
<head>
<style>
img {
    opacity: 0.4;
    filter: alpha(opacity=40);
}
</style>
</head>
<body>

<img src="image5" width="200" height="150" alt="image5">
</body>
</html>

Here is the sample output produced by the above CSS3 example:

css transparent image

CSS3 Image Transparency on Mouse Hover (Hover Effect)

Let's look at the following example to know how to change image transparency on mouse hover:

<!DOCTYPE html>
<html>
<head>
<style>
#img1 img {
    opacity: 0.4;
    filter: alpha(opacity=40);
}
#img1 img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100);
}
#img2 img {
    opacity: 0.4;
    filter: alpha(opacity=40); 
}
#img2 img:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
}
#img3 img {
    opacity: 0.4;
    filter: alpha(opacity=40);
}
#img3 img:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
}
</style>
</head>
<body>

<img src="image1.jpg" id="img1" width="200" height="150" alt="image1">
<img src="image2.jpg" id="img2" width="200" height="150" alt="image2">
<img src="image3.jpg" id="img3" width="200" height="150" alt="image3">

</body>
</html>

Here is the sample output of the above CSS3 example. To watch the image transparency changing just place your mouse's cursor on the 3 images one by one:

css image transparency1 css image transparency2 css image transparency3

Here, we make changes the image transparency when a user hovers over one of the images

CSS3 Add Text in Transparent Box

Let's look at the following example to add text in the transparent box:

<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
  background: url(image1.jpg) repeat;
  border: 2px solid silver;
}
div.transbox
{
  margin-top:30px;margin-bottom:30px;margin-left:60px;margin-right:60px;
  background-color: #ffffff;
  border: 1px solid silver;
  opacity:0.6;
  filter:alpha(opacity=60);
}
div.transbox p
{
  margin: 5%;
  font-weight: bold;
  color: red;
}
</style>
</head>
<body><div class="background">
<div class="transbox">
<p>This is a paragraph which is placed in the transparent box</p>
</div>
</div>
</body>
</html>

Here is the live demo output of this CSS3 example:

This is a paragraph which is placed in the transparent box


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test