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.
Transparent Image Overlay in CSS
**
div.imageContainer{
/* Image Container is used to hold both the images. It is more like a frame */
/* that holds the photo */
float:left; /* You can either have the image container float left or right, depending on your requirement */
position:relative; /* The position of the container is relative */
/* but the image that is overlaid on it will be positioned absolute */
/* Imagine it like placing the container anywhere but */
/* placing the image inside it absolute with respect to the container */
}
div.overlayImage img{
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* Set the width of the image that is overlaid */
left:0px; /* Set the width of the image that is overlaid */
width:100%; /* Set the width of the image that is overlaid */
height:50%; /* Set the height of the image that is overlaid */
/* If you want the image that you have overlaid to be transparent you have to set its transparency */
opacity:0.7; /* Sets the opacity or percentage of transparency for the image in browsers like Firefox and Chrome and Safari. This value can be anywhere from 0.0 (absolutely transparent)to 1.0 (opaque) */
filter:alpha(opacity=70); /* Sets the opacity or percentage of transparency for the image in the Internet Explorer browser. This value can be anywhere from 00 (absolutely transparent)to 100 (opaque) */
}
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.
-
Create an image container and position it relatively on the web page.
-
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.
-
Set the opacity (it should be less than 100% preferably around 40% to 70%) of the overlaid div.
-
Insert the images.
Reference:
Source: Author’s own experience.
