Transparent Image Overlay in CSS - Amazing CSS Tricks

Transparent Image Overlay in CSS

To overlay an image on another image, you have to place an image in a container div. On top of the div element that holds the base image, you have to absolutely position the image to be overlaid. Set the transparency to less than 100 percent, preferably around 50% to 60% to achieve the transparent image overlay in CSS.

To do this you will need two images; one for the base image (Sunset.jpg) and one image (Water lilies.jpg) to be overlaid.

With some creativity you can make really good combinations like a person standing in front of a monument, text describing about the picture, etc. Thus transparent image overlay in CSS is achieved.

Create Transparent Image Overlay in CSS - Code

Instead of explaining first and then writing the code, I have thoroughly commented the code for you to understand easily. Just make sure that you have a directory (or folder) with the name of your choice, and you use an editor (even Notepad will do if you are using Windows) to write the code and save it in the same directory with a .html extension. You will have to place the images that you use, in the same directory or you will have to make sure to write the proper path if you place the images in some other directory.

**

Summary

This is the easiest ways to create a transparent image overlay in CSS. I will summarize the approach, once again, for your easy understanding.

1. Create an image container and position it relatively on the web page.

2. Create an absolute div container inside the image container div. Set the width and height of the div that holds the overlaid image and also set its position using the bottom and left attributes.

3. Set the opacity (it should be less than 100% preferably around 40% to 70%) of the overlaid div.

4. Insert the images.

Reference:

Source: Author’s own experience.