Pin Me

Transparent Image Overlay in CSS

written by: vishalseafarer•edited by: Christian Cawley•updated: 4/8/2011

Web pages are made beautiful with the help of CSS.The transparent image overlay in CSS is used to stack images on top of each other. This technique can be used to create create collages, add image or text descriptions, etc.

  • slide 1 of 4

    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.

  • slide 2 of 4

    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.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>

    <head>

    <title>Transparent Image Overlay in CSS</title>

    transparent image overlay in CSS 

    <meta name="" content="">

    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">

    <style>

    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) */

    }

    </style>

    </head>

    <body>

    <!-- imageContainer div -->

    <div class="imageContainer">

    <!-- First layer image -->

    <img src='Sunset.jpg' />

    <!-- overlayImage div -->

    <div class="overlayImage">

    <!-- Overlaid image or Second layer image -->

    <img src="Water lilies.jpg" />

    </div>

    </div>

    </body>

    </html>

  • slide 3 of 4

    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.

  • slide 4 of 4

    Reference:

    Source: Author's own experience.