CSS Image Opacity

CSS Opacity / Transparency

Creating transparent effects with CSS is straightforward using the opacity property or transparent color values like RGBA and HSLA.

The opacity property is well-supported in modern browsers.

Example 1: Applying Opacity to an Image

The opacity property sets the transparency level for an entire element, including its content and border. A value of 1.0 is fully opaque (default), and 0.0 is fully transparent.

Original image (opacity: 1.0):

[Imagine an image of clematis here]

Image with opacity set to 0.5:

[Imagine the same image, but semi-transparent]

The CSS code:

img.transparent {
  opacity: 0.5;
}

Note: Older IE versions used a proprietary filter property, which is no longer necessary.

Example 2: Opacity Hover Effect

You can easily create effects where an element becomes more or less opaque on hover using the :hover pseudo-class.

Hover over the images below:

[Imagine two semi-transparent images side-by-side]

The CSS looks like this:

img.hover-effect {
  opacity: 0.6;
  transition: opacity 0.3s ease; /* Optional: Add smooth transition */
}

img.hover-effect:hover {
  opacity: 1.0;
}

Here, the images start semi-transparent (opacity: 0.6). When the user hovers over an image, its opacity changes to 1.0 (fully opaque). The transition property makes this change smooth.

Example 3: Transparent Background Box with Opaque Text

If you use the opacity property on a container, its child elements (like text) will also become transparent. To create a transparent background without affecting the text, use RGBA or HSLA color values for the background-color.

[Imagine a background image. On top of it, a white box with black text inside. The white box's background is semi-transparent, but the black text is fully opaque.]

HTML Structure:

<div class="background-container">
  <div class="text-box">
    <p>This text is inside a box with a semi-transparent background, but the text itself remains fully opaque.</p>
  </div>
</div>

CSS using RGBA:

.background-container {
  background: url('path/to/background.jpg') no-repeat center center;
  background-size: cover;
  padding: 50px;
}

.text-box {
  background-color: rgba(255, 255, 255, 0.7); /* White background with 70% opacity */
  padding: 20px;
  border: 1px solid #ccc;
}

.text-box p {
  color: #000000; /* Black text, fully opaque */
  font-weight: bold;
  margin: 0; /* Remove default paragraph margin */
}

In this example, rgba(255, 255, 255, 0.7) sets the background of .text-box to white with 70% opacity. Crucially, the color property of the paragraph inside remains fully opaque black.