In this tutorial, I’m going to show you how-to apply transparency to your images using CSS3 filter property’s opacity function.Making your images transparent can be useful for hero / jumbotron headers where you want to put text over or where you want an image to be transparent until an event happens, like being hovered on or scroll activated.

The Results

Not transparent:

Transparent:

The HTML and CSS

The opacity function uses a percentage, from 0% to 100%; where 0% leaves the image full transparent and 100% leaves the image unchanged.

Here is the HTML you would use to apply transparency to the image:

<img src="image.jpg" class="opacity" />

Here is the CSS you would use to apply transpareny to the image:

img.opacity {
    filter: opacity(50%);
    -webkit-filter: opacity(50%);
    -moz-filter: opacity(50%);
    -o-filter: opacity(50%);
    -ms-filter: opacity(50%);
}

You can also apply this effect when the image is hovered:

img.opacity:hover {
    filter: opacity(50%);
    -webkit-filter: opacity(50%);
    -moz-filter: opacity(50%);
    -o-filter: opacity(50%);
    -ms-filter: opacity(50%);
}

Instead of using the filter property, we can also use the actual opacity CSS property like so:

img.opacity {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

Now, you’re wondering the difference between the filter and the property. Well the opacity property is more established than the filter property, the filter property provides hardware acceleration for better performance for some browsers.

Also instead of using percentages 100%, you could use percentages as a decimal, so 100% would be 1; for 80%, you would use 0.8.

img.opacity
{
filter: opacity(50%);
-webkit-filter: opacity(50%);
-moz-filter: opacity(50%);
-o-filter: opacity(50%);
-ms-filter: opacity(50%);
}