How to Overlay Icons on Top of Images with CSS
Tags: css, html, webdev, beginners
Published: 2021-02-27 06:56:39

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.
```html
<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.

```css
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.

![after styling](https://miro.medium.com/max/1050/1*Qqb3-CSFZr5r5oz6YjaOWw.png)

##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](https://developer.mozilla.org/ja/docs/Web/CSS/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.
```css
 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;
        }
```
![](https://miro.medium.com/max/1050/1*8meHI3TS0qpKyE-BLnZSsQ.png)
You can know more about the z-index [here](https://developer.mozilla.org/ja/docs/Web/CSS/z-index).

##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.

```css
        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;
        }
```
We have added some transitions when the user hovers over the icons to make the page look more beautiful.

![image](https://miro.medium.com/max/1050/1*D_kh6CY48Evw9ZR8z3fIPg.png)

###Conclusion
And that sums it up! Comment below if you have any feedback. Please find the example of the project [here](https://github.com/Sanchithasharma/IconsOverImage). Thank you for reading.