Text Over Images

You may need to display text or title over an image or images to hint about the particular image. People will understand by looking at the title or text what the image about. I will use CSS (Cascading Style Sheet) to decorate text over images.

The title or text over images are written in the HTML content though the decoration part will be done using CSS.

Prerequisites

CSS, HTML

HTML Part

Here is the HTML part that shows where to write the title or text to be shown on the images.

<div class="img_container">
  <div class="img_row">
	<div class="img_cat">
	  <div class="img_clss">
		<img src="1.jfif" alt="">
	  </div>
	  <div class="title">
		<h2>Nature</h2>
	  </div>
	</div>
	<div class="img_cat">
	  <div class="img_clss">
		<img src="2.jfif" alt="">
	  </div>
	  <div class="title">
		<h2>Pool</h2>
	  </div>
	</div>
	<div class="img_cat">
	  <div class="img_clss">
		<img src="3.jfif" alt="">
	  </div>
	  <div class="title">
		<h2>Cloud</h2>
	  </div>
	</div>
	<div class="img_cat">
	  <div class="img_clss">
		<img src="4.jfif" alt="">
	  </div>
	  <div class="title">
		<h2>Dawn</h2>
	  </div>
	</div>
  </div>
</div>

CSS Part

CSS style part that decorates how the display part will look like on user interface. The text are aligned in center position over the images.

.img_container {
  height: 1224px;
  width: 90%;
  margin: 100px auto;
}

.img_row {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 20px;
}

.img_cat {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.img_clss img {
  height: auto;
  border-radius: 5px;
}

.title {
  position: absolute;
  left: 50%;
  top: 50%;
  color: white;
  transform: translate(-50%, -50%);
}

Result

The final result will look like the following image in the web page. You can download any images from the internet for testing purpose.

Source Code

Download