How to Overlay Icons on Top of Images with CSS

#css #html #webdev #beginners

Recently I worked on a project where we had to make a custom image gallery. The requirement needed me to place many components like icons, texts, another image, and many other things on the image. While doing that, I learned about the steps to overlay the components on the image which I would like to share. Let's build a video player page to understand how the overlaying of icons works in CSS.

Let’s consider the below template. We have an image on which we need to place the play button in the center and like button at the top-right corner of the image.

<h2>Video Player</h2>
<p>Hover over to play the video</p>
<div class="container">
  <div href="#" class="like-button" title="Like Button">
    <i class="fa fa-heart fa-1x"></i>
  </div>
  <img src="https://staticvideos.pexels.com/videos/1448735/pictures/preview-0.jpg" alt="Beautiful Image" class="image">
<div class="overlay">
  <button href="#" class="play-icon" title="Video Play">
   <i class="fa fa-play"></i>
 </button>
</div>
</div>

First, let’s start by adding some styling to the page and the components.

body {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

.image {
 width: 100%;
 height: auto;
}

.overlay {
 height: 100%;
 width: 100%;
 opacity: 0.3;
 transition: .3s ease;
 background-color: transparent;
}


.container:hover .overlay {
 opacity: 0.7;
}

.play-icon {
 color: black;
 font-size: 2rem;
 cursor: pointer;
}

.like-button {
color: red;
font-size: 20px;
cursor: pointer;
border-radius: 10rem;
background-color: transparent;
border: transparent;
}

.like-button :hover {
color: red;
}

We have styled the components and now they are ready to be placed on the image. Normally when we write the elements, the components are stacked vertically like below.
But we need to overlay the two icons on the image in the position we want. We can achieve it by using the following steps.

Step 1. Assign the Positions

This is the most important step. The first step to enclose the components along with the image as one element and assign the CSS property position: relative. And the icons we need to place on the image are assigned the property position: absolute.
In this case, we are adding the class .container( which encloses the image and the icons) position: relative, and the icons we overlay are assigned the property position: absolute.
You can know more about the position property in CSS below.

CSS Property: Position

Step 2. Assign z-index higher than the image to the icons if necessary

In this case, I am assigning z-index to the div of icons ( .overlay and .like-button ) which is higher than that of the image so that they are overlayed on the image. In some cases, it is not required to add if the default indices of the components are favorable to our requirement. But make sure to check and add.
We have added the positions and z-index in the below code.

 body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .image {
            width: 100%;
            height: auto;
        }

        .overlay {
            position: absolute;
            height: 100%;
            width: 100%;
            opacity: 0.3;
            transition: .3s ease;
            background-color: transparent;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .container {
            position: relative;
            width: 100%;
            max-width: 400px;
        }


        .overlay:hover {
            opacity: 0.7;
        }

        .play-icon {
            position: absolute;
            color: black;
            font-size: 2rem;
            cursor: pointer;
            left: 50%;
            bottom: 50%;
        }

        .fa-heart {
            position: absolute;
            z-index: 2;
            color: red;
            position: absolute;
        }

You can know more about the z-index here.

Step 3. Position the icons accordingly using the other CSS properties

Since we have our icons placed on the image, let’s move the play button to the center and the like button to the top-right end of the image using few properties.

        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .image {
            width: 100%;
            height: auto;
        }

        .overlay {
            position: absolute;
            height: 100%;
            width: 100%;
            opacity: 0.3;
            transition: .3s ease;
            background-color: transparent;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .container {
            position: relative;
            width: 100%;
            max-width: 400px;
        }


        .overlay:hover {
            opacity: 0.7;
        }

        .play-icon {
            position: absolute;
            color: black;
            font-size: 2rem;
            cursor: pointer;
            left: 50%;
            bottom: 50%;
        }

        .fa-heart {
            position: absolute;
            z-index: 2;
            color: red;
            position: absolute;
        }