Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Set the opacity of an image with CSS

Javascript Web Development Front End Scripts

To set the opacity of an image, you can use the CSS opacity property. This is the modern standard method that works across all browsers. The opacity property accepts values from 0 (completely transparent) to 1 (completely opaque).

Syntax

opacity: value;

Where value is a number between 0 and 1:

  • 0 = completely transparent (invisible)
  • 0.5 = 50% transparent
  • 1 = completely opaque (default)

Example: Basic Image Opacity

<!DOCTYPE html>
<html>
<head>
    <style>
        .opacity-demo {
            border: 1px solid #333;
            margin: 10px;
            width: 200px;
            height: 150px;
            background-color: #f0f0f0;
        }
        
        .opacity-25 { opacity: 0.25; }
        .opacity-50 { opacity: 0.5; }
        .opacity-75 { opacity: 0.75; }
    </style>
</head>
<body>
    <h3>Image Opacity Examples</h3>
    
    <div>Original (opacity: 1)</div>
    <img class="opacity-demo" src="/css/images/logo.png" alt="Original" />
    
    <div>25% Opacity</div>
    <img class="opacity-demo opacity-25" src="/css/images/logo.png" alt="25% opacity" />
    
    <div>50% Opacity</div>
    <img class="opacity-demo opacity-50" src="/css/images/logo.png" alt="50% opacity" />
    
    <div>75% Opacity</div>
    <img class="opacity-demo opacity-75" src="/css/images/logo.png" alt="75% opacity" />
</body>
</html>

Hover Effects with Opacity

A common use case is creating hover effects where images become more or less transparent on mouse hover:

<!DOCTYPE html>
<html>
<head>
    <style>
        .hover-image {
            width: 200px;
            height: 150px;
            opacity: 0.6;
            transition: opacity 0.3s ease;
            border: 1px solid #ddd;
        }
        
        .hover-image:hover {
            opacity: 1;
        }
    </style>
</head>
<body>
    <h3>Hover Over the Image</h3>
    <img class="hover-image" src="/css/images/logo.png" alt="Hover effect demo" />
    <p>The image becomes fully opaque on hover</p>
</body>
</html>

Legacy Browser Support

For older browsers, you may need fallback methods:

.image-opacity {
    opacity: 0.5;                    /* Modern browsers */
    -moz-opacity: 0.5;              /* Old Firefox */
    filter: alpha(opacity=50);       /* Internet Explorer 8 and below */
}

Comparison of Methods

Property Browser Support Recommended
opacity All modern browsers Yes - Standard method
-moz-opacity Old Firefox only No - Deprecated
filter: alpha(opacity=x) IE 8 and below No - Legacy only

Key Points

  • Use opacity: value for all modern browsers
  • Values range from 0 (transparent) to 1 (opaque)
  • Add transition for smooth opacity changes
  • Legacy properties are only needed for very old browsers

Conclusion

The CSS opacity property is the standard way to control image transparency. Use values between 0 and 1, and combine with transitions for smooth hover effects.

Updated on: 2026-03-15T23:18:59+05:30

228 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements