CSS Text Over an Image

Please Share On:

Definition:

You may be wondering, is it possible to put text over an image and positioned it like a top left corner, top right corner, center, bottom left corner, and bottom right corner?

Let me tell you. Yes, it is possible to put text over an image and position it according to your design.

First, create a container and position as relative. Now, you can position your text at absolute top left corner to show your text at the top left corner.

See the below example, how I position text into different locations over an image.

Text at Top Left Corner:

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .image1 {
        opacity: 0.5;
        padding: 10px;
        
      }
      
      .container {
         position: relative;
      }
      
     .top-left {
        position: absolute;
        top: 2px;
        left: 20px;
        font-size: 14px;
	  }

    </style>
  </head>
  
  <body>
    <table style="border: 2px solid grey;">
      <tr>
        <th>Text over an Image in the top left corner</th> 
      </tr>
      
      <td class = "container">
          <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Opacity" class="image1" width="95%" height="100%">
         <p class="top-left">
           Text at Top left Corner
        </p>
      </td>
      
      
    </table>
  </body>
</html>						
					

Output:



Text at Top Right Corner:

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .image1 {
        opacity: 0.5;
        padding: 10px;
        
      }
      
      .container {
         position: relative;
      }
      
     .top-right {
        position: absolute;
        top: 0px;
        right: 20px;
        font-size: 14px;
	  }

    </style>
  </head>
  
  <body>
    <table style="border: 2px solid grey;">
      <tr>
        <th>Text over an Image in the top right corner</th> 
      </tr>
      
      <td class = "container">
          <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Opacity" class="image1" width="95%" height="100%">
         <p class="top-right">
           Text at Top right Corner
        </p>
      </td>
      
      
    </table>
  </body>
</html>						
					

Output:


Text at the center of the Image

To create a text at the center of an image. First, create a container with a relative position and center a text absolute position on the top: 50% and left 50%.

See a below example.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        opacity: 0.5;
        width: 100%;
        height: auto;
        
      }
      
      .container {
         position: relative;
      }
      
     .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /*reposition an element in the horizontal and vertical position*/
        font-size: 14px;
	  }

    </style>
  </head>
  
  <body> 
      <h3 class="title">Text over an Image at the center</h3> 
      <div class = "container">
          <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Text at center of the image">
        
        <p class="center">
           Text at Center of the image
        </p>
      </div>    
   
  </body>
</html>																
					

Output:



Text at the bottom left corner

See an source code of creating a text at the bottom left corner. Here, you apply bottom values like you have applied in the top left corner’s top values.

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .image1 {
        opacity: 0.5;
        padding: 10px;
        
      }
      
      .container {
         position: relative;
      }
      
     .bottom-left {
        position: absolute;
        bottom: 0px;
        left: 20px;
        font-size: 14px;
	  }

    </style>
  </head>
  
  <body>
    <table style="border: 2px solid grey;">
      <tr>
        <th>Text over an Image atthe bottom left corner</th> 
      </tr>
      
      <td class = "container">
          <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="CSS Text at Bottom left Corner" class="image1" width="95%" height="100%">
         <p class="bottom-left">
           Text at Bottom left Corner
        </p>
      </td>    
    </table>
  </body>
</html>	

Output:


Text at the bottom right corner

To make your text at bottom right corner, change your absolute text position into bottom: 0 and right:0. See a source code for details:

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .image1 {
        opacity: 0.5;
        padding: 10px;
        
      }
      
      .container {
         position: relative;
      }
      
     .bottom-right {
        position: absolute;
        bottom: 0px;
        right: 20px;
        font-size: 14px;
	  }

    </style>
  </head>
  
  <body>
    <table style="border: 2px solid grey;">
      <tr>
        <th>Text over an Image at the bottom right corner</th> 
      </tr>
      
      <td class = "container">
          <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="CSS Text at Bottom right Corner" class="image1" width="95%" height="100%">
         <p class="bottom-right">
           Text at Bottom right Corner
        </p>
      </td>    
    </table>
  </body>
</html>																
					

Output:


Donate to support writers.


You may be interested in the following topics:

CSS Transparent Images

Please Share On:

Definition:

CSS transparent images mean you can display your image with different opacity. The opacity value starts from 0.0 to 1. 0.0 is fully transparent and 1 is the less transparent.

See the below image of two transparent images with different opacity values:

CSS Transparent Images

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .image1 {
        opacity: 0.5;
        padding: 20px;
      }

      .image2 {
        opacity: 1.0;
        padding: 20px;
      }
    </style>
  </head>
  
  <body>
    <table style="border: 2px solid grey;">
      <tr>
        <th>Image Transparent is 50%</th>
        <th>Image Transparent is 100%</th>
      </tr>
      <tr> 
      <td>
          <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Opacity" class="image1" width="170" height="100">
      </td>
        <td>
           <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Opacity" class="image2" width="170" height="100">
        </td>
      </tr>
      
    </table>
  </body>
</html>

Output:

To understand in detail, click the “CSS Opacity” tutorial


Donate to support writers.


You may be interested in the following topics:

CSS Center an Images

Please Share On:

Definition:

Today, you will learn how to center an image using CSS code. To center an image you need to set left and right margin to auto and make an element a block.

See an image which is centered in a container.

Syntax:

img { 
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 50%
      }

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin:20px;
      }

      .container {
        width: 100%;
        background-color: lavender;
        box-shadow: 0 8px 8px 2px rgba(0, 0, 0, 0.6);
        margin-bottom: 15px;
      }
      
      img { 
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 50%
      }

      .title, h2 { 
        text-align: center;
        padding: 10px 20px;;
      }
    </style>
  </head>
  <body>

    <h2>Center an Images</h2>

    <div class="container">
      <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2020/11/Sydney-Harbour-Bridge-View.jpg" alt="Sydney Harbour Bridge" > 
      <div class="title">
        <p>Sydney Harbour Bridge</p>
      </div>
    </div>

  </body>
</html>							
					

Output

Click “TRY IT YOURSELF” to see the results.


Donate to support writers.


You may be interested in the following topics:

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial