❮ Css Rwd Mediaqueries Pr Dim Height ❯

CSS Image `Transparency/Opacity`

Creating transparent images using CSS is easy.

Note: The CSS Opacity property is part of the W3C's CSS3 recommendation.

More Examples

Create a Transparent Image - Hover Effect

Create a Transparent Box with Text and Background Image

Example 1 - Create a Transparent Image

The transparency property in CSS3 is opacity.

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

Normal image

Same image with transparency:

See the following CSS:

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

Browsers like IE9, Firefox, Chrome, Opera, and Safari use the opacity property to make an image opaque. The opacity property values range from 0.0 - 1.0. A smaller value makes the element more transparent.

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

Example 2 - Image Transparency - Hover Effect

Hover the mouse over the image:

CSS style:

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 */
}

The first CSS block is similar to the code in Example 1. Additionally, we add what happens when a user hovers the mouse over one of the images. In this case, we want the image to be clear when hovered over.

This CSS is: opacity=1.

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

When the mouse pointer moves away from the image, the image will regain its transparency.

Example 3 - Text in a Transparent Box

This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box.

Here is the source code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.background {
  width: 500px;
  height: 250px;
  background: url(https://www.tutorialpro.org/images/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 text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box. This text is in a transparent box.
</p>
</div>
</div>

</body>
</html>