How to position text to bottom right on an image with CSS

CSSWeb DevelopmentFront End Technology

To position text to bottom left, use the bottom and right property. You can try to run the following code to position text to bottom right on an image:

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         .box {
            position: relative;
         }
         img {
            width: 100%;
            height: auto;
            opacity: 0.6;
         }
         .direction {
            position: absolute;
            bottom: 10px;
            right: 19px;
            font-size: 13px;
         }
      </style>
   </head>
   <body>
      <h1>Heading One</h1>
      <p>Below image has text in the bottom right:</p>
      <div class = "box">
         <img src = "https://www.tutorialspoint.com/python/images/python_data_science.jpg" alt = "Tutorial" width = "800" height = "400">
         <div class = "direction">Bottom Right Corner</div>
      </div>
   </body>
</html>
raja
Published on 24-May-2018 10:47:04
Advertisements