Text displayed over an image

<style> /* Container holding the image and the text */
.container {
  position: relative;

    
  text-align: center;
  color: white;
}

/* Bottom 
  left text */

  .bottom-left {
  position: absolute;
  
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: 
  absolute;
  top: 8px;
  left: 16px;
}

  
/* Top right text */
.top-right {
  
  position: absolute;
  top: 8px;
  
  right: 16px;
}

/* Bottom right text */

  .bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text 
  */
.centered {
  position: 
  absolute;
  top: 50%;
  left: 50%;
  
  transform: translate(-50%, -50%);
}</style>

<div class="container">
  <img src="img_snow_wide.jpg" alt="Snow" 
  style="width:100%;">
  <div class="bottom-left">Bottom Left</div>
  
  <div class="top-left">Top Left</div>
  <div class="top-right">Top 
  Right</div>
  <div class="bottom-right">Bottom Right</div>
  
  <div class="centered">Centered</div>
</div>

Similar codes

1 vote110 views1 answer
Anchor tag to go to top of the page
Html
1 vote114 views2 answers
Sudo: /opt/lampp/lampp: command not found
Html
0 vote144 views1 answer
Use boolean condition ngclass
Html
-1 vote115 views2 answers
Div shift right
Html
79 votes91 views17 answers
Iframe
Html
13 votes104 views3 answers
How do i make a placeholder for a 'select' box
Html
13 votes110 views1 answer
How do i put my h1 tag in the middle of the screen
Html
0 vote128 views1 answer
Js does a return stop a while
Html
0 vote117 views1 answer
Display html table only on screen larger than md
Html
0 vote94 views1 answer
Cara membuat persegi di html
Html