How to place HTML text over image

In this simple example, we’ll learn how to place HTML text over images.

Example 1: HTML text over image

We can see from the above screenshot, we have placed the price with the rupee icon at the left bottom of an image.

We need to add HTML code as here

<div class="tariff">
  <div class="tariff-thumbnail">
    <div class="tariff-price">
       <span class="tariff-price"> ₹ : 7500 </span>
    </div>
     <a href="#">
       <img src="...">
    </a>
  </div>
</div>

Add the following code in CSS.

.tariff .tariff-thumbnail{
  height: auto;
  overflow: hidden;
  position: relative;
}
 
.tariff .tariff-price{
  position: absolute;
  left: 0;
  bottom: 0;
  background: #3367d6;
  color: white;
  padding: 7px 8px 9px;
  text-align: center;
  width: 63px;
  z-index: 10;
}

How to add image on an image in HTML

In our second example, we have added a video icon image to the gallery image. We also add Hover Effect and Video on Video Screen or Gallery

In the HTML file, let’s add an image gallery and video icon of the above image.

<section class="front-video w3-container">
  <h1 class="w3-center">LATEST VIDEO</h1>
  <div class="w3-row-padding">
    <div class="w3-col m6">
      <div class="screenshot-grid-video">
        <a href="" class="tamo-video-box-layout">
          <img src="images/video1-screenshot.jpg" alt="" style="width:100%;">
          <div class="tamo-video-player-content">
            <div class="tamo-video-player">
              <img src="images/video-player.png" alt="video-player">
            </div>
          </div>
        </a>
      </div>
      <h4 style="text-align:center;">WORLD IS ALIVE</h4>
    </div> <!-- End of column 1-->
    <div class="w3-col m6">
      <div class="screenshot-grid-video">
        <a href="" class="tamo-video-box-layout">
          <img src="images/video2-screenshot.jpg" alt="" style="width:100%;">
          <div class="tamo-video-player-content">
            <div class="tamo-video-player">
              <img src="images/video-player.png" alt="image-rounded">
            </div>
          </div>
        </a>
      </div>
      <h4 style="text-align:center;">LOVE LIVE LIFE</h4>
    </div> <!-- End of column 2 -->
  </div> <!-- End of row -->
</section>

In CSS, let align the video player icon on the image.

.tamo-video-box-layout {
    display: block;
    position: relative;
    margin: 0 auto;
}
.tamo-video-player-content {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    opacity: 1;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}
.tamo-video-player-content img {
    width:5em;
    opacity: 0.5;
    transition: 1.5s;
    -webkit-transition: 1.5s;
    -moz-transition: 1.5s;
}
.tamo-video-player {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #fff;
    text-transform: uppercase;
    line-height: 2;
    padding: 15px;
}
.screenshot-grid-video:hover .tamo-video-player-content img {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 1;
    -ms-filter: none;
    filter: none;
    opacity: 0.8;
    transition: 1.5s;
    -webkit-transition: 1.5s;
    -moz-transition: 1.5s;
}