Tag: text over image

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:

Try it yourself

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:

Try it yourself

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:

try it yourself

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:

try it yourself

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:

try it yourself

Donate to support writers.

You may be interested in the following topics:

CSS Responsive Images

Please Share On:

Definition:

CSS responsive images will automatically resize your images according to your device screen.

Syntax:

img {
  max-width: 100%;
  height: auto;
}

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2{
        text-align: center;
      }
      
      img {
        max-width: 100%;
        height: auto;
      }   
    </style>
  </head>
  
  <body>
    <h2>Responsive Images</h2>
    <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2020/11/Sydney-Harbour-Bridge-View.jpg" alt="Sydney Harbour Bridge"> 
  </body>
</html>

Output

Click “TRY IT YOURSELF” to see the results and make sure to resize the image to see the responsive image effects.

Try it yourself

Donate to support writers.

You may be interested in the following topics:

CSS Thumbnail Images

Please Share On:

Definition:

CSS thumbnail images are mostly used in small screen devices. You can change your images into thumbnail images size by using the width and height of the images.

The mostly used thumbnail width and height sizes are 150 x 150 px. You can use your own thumbnail height and width values.

Syntax:

img {
  width: 150px;
  height: 150px;
}

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        width: 150px;
        height: 150px;
      }
    </style>
  </head>
  <body>
    <h2>Rounded Images</h2>
    <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2020/11/Sunset-Harbour-Bridge-View.jpg" alt="Sunset Harbour Bridge" width="300" height="300">
  </body>
</html>

Output

Click “TRY IT YOURSELF” to see the results.

Try it yourself

Thumbnail Image With Border Value

To give your thumbnail image a better look, use a border and padding property value. See an example below of using border and padding property value in thumbnail image.

Syntax:

img {
        border: 1px solid #a9a9a9;
        padding: 5px;
        width: 150px;
        height: 150px;
      }

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        border: 1px solid #a9a9a9;
        padding: 5px;
        width: 150px;
        height: 150px;
      }
    </style>
  </head>
  <body>
    <h2>Thumbnail Images</h2>
    <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2020/11/Sunset-Harbour-Bridge-View.jpg" alt="Sunset Harbour Bridge" width="300" height="300">
  </body>
</html>

Output:

Click “TRY IT YOURSELF” to see the results.

try it yourself

Donate to support writers.

You may be interested in the following topics:

CSS Rounded Images

Please Share On:

Definition:

By default, an image is shown in rectangular views. If you want to change your image into rounded images, use the border-radius property. The border-radius property changes each side of the image edge according to your border-radius value.

50% border radius property value makes your image into rounded images.

See an example below which uses a border-radius of 50%.

Rounded Images

Syntax:

img {
  border-radius: 50%;
}

Source Code:

<!DOCTYPE html>
<html>
  <head>
    <style>
      img {
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <h2>Rounded Images</h2>
    <img src="https://www.elsebazaar.com/blog/wp-content/uploads/2020/11/Sunset-Harbour-Bridge-View.jpg" alt="Sunset Harbour Bridge" width="300" height="300">
  </body>
</html>

Output

Click “TRY IT YOURSELF” to see the results.

Try it yourself

Try yourself by changing the property value to 10%, 20%, or your custom values to see the differences.

Donate to support writers.

You may be interested in the following topics:

CSS Images (All Properties)

Please Share On:

Definition:

With the help of CSS code, you can convert your original image into different styles accordingly you want. Below are the lists of some CSS image styling:

Images StylesDefinitions
1) Rounded ImagesDisplay a rounded image
2) Thumbnail ImagesCreate an image in thumbnail size
3) Responsive ImagesResize the image to fit the device screen
4) Card ImagesDisplay images like flashcard
5) Center an ImagesKeep your image at the center of the screen
6) Transparent ImagesDisplay images with different opacity
7) Text Over an ImageWrite text over images
8) Image Hover OverlayShow image hover effects
9) Flip an imagesFlip over an image on mouse hover
10) Image FiltersAdd visual effects like saturation and blur

Donate to support writers.

You may be interested in the following topics:

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial