How to place

Question

I have a few images below each other in a page and want to add span overlay text over an image vertically instead of horizontally.My current code shows(on iPhone screen) the span overlay text horizontally but I want to display it vertically and readable from bottom to top.Hope you guys help me. Thanks

<html>
<head>
<style>


</style>

<script>
//here I get the items information from db using ajax method and construct the item information blocks and append it to div called demo
</script>

</head>
<body>
<div id="demo">
<strong>1)Item 1</strong><br>
<div style="text-align: right;">70<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> </div>
<span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px">SOLD OUT</span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br>
<a href="https://www.mywebsite.com/item1.html">https://www.mywebsite.com/item1.html</a>
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>

<strong>2)Item 2</strong><br>
<div style="text-align: right;">65<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> 
<span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px"></span></div>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br>
<a href="https://www.mywebsite.com/item2.html">https://www.mywebsite.com/item2.html</a>
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>

</body>
</html>

Thanks for reply but i want to text to be placed like pic shown above. — user1788736, Apr 19 '20 at 00:23
Ah ok, you added that in edit. Use transform: rotate(90deg); https://www.w3schools.com/cssref/css3_pr_transform.asp And I relay hope that this isn't your real code. Everything is wrong in there... — ikiK, Apr 19 '20 at 00:24

Steve K · Answer 1 · 2020-04-19T01:08:31.807

Css transforms Css Transforms and transform origin couldn't hurt either Transform Origin here is a quick example.

.wrapper{
  height: 500px;
  width: 500px;
  position:relative;
  background: rgb(220,220,220);
}

.wrapper span{
  position:absolute;
  top:100px;
  left: 20px;
  font-size: 20px;
  font-weight: bold;
  
  /*important part below*/
  transform: rotate(-90deg);
  transform-origin: top left;
}

<div class="wrapper">
  <span>Sold Out</span>
</div>

So using your code it would be something like:

<html>
<head>
<style>


</style>

<script>
//here I get the items information from db using ajax method and construct the item information blocks and append it to div called demo
</script>

</head>
<body>
<div id="demo">
<strong>1)Item 1</strong><br>
<div style="text-align: right;">70<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> </div>
<span id="overlay_text" style="position: relative; z-index: 3;background-color:white;transform: rotate(-90deg);
transform-origin: top left; display:inline-block;
top: 100px;left: 10px">SOLD OUT</span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br>
<a href="https://www.mywebsite.com/item1.html">https://www.mywebsite.com/item1.html</a>
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>

<strong>2)Item 2</strong><br>
<div style="text-align: right;">65<br> </div>
<div style="position: relative; z-index: 1;">
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> 
<span id="overlay_text" style="position: relative; z-index: 3;background-color:white;transform: rotate(-90deg);
transform-origin: top left; display:inline-block;
top: 100px;left: 10px">Sold Out</span></div>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br>
<a href="https://www.mywebsite.com/item2.html">https://www.mywebsite.com/item2.html</a>
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>
</body>
</html>

Thanks for demo.i tried to add your sample to my current code but it does not show the overlay at all i think the image covers the overlylay! — user1788736, Apr 19 '20 at 00:59
I edited my answer with a snippet of your code underneath. You need to add a display property to your span if you are going to relatively position the overlay text. — Steve K, Apr 19 '20 at 01:12
I was trying to learn your first demo i noticed that when overlay text is longer then 12 characters the remaining overlay text goes to new line! How i can modify top:100px; for long overylay text to show them in one line vertically(instead of two vertical lines ? — user1788736, Apr 19 '20 at 12:14
It shouldn't move to the next line unless you are setting some kind of restraint on it. What is normally done for overlay text is have your overlay positioned absolutely over your image. Then instead of using top to dictate the top position you can use Css transformations again with translate. Since you are rotating the image you would use TranslateX and 100% would put it at the top of your wrapper. Here is a simplified version of your demo for you to mess with https://jsfiddle.net/wamosjk/687kxweb/. You can put extra characters here until you run out of vertical space. — Steve K, Apr 19 '20 at 16:39

score 1 · Answer 2 · answered Apr 19 '20 at 01:01

You really need to start using CSS outside of your HTML inline style writing, among other things. Read here why inline transform didn't work for you: CSS transform doesn't work on inline elements I have set your position to position: absolute;

<div id="demo">
<strong>1)Item 1</strong><br>
<div style="text-align: right;">70<br> </div>
<div style="position: relative; z-index: 1;"></div>
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/8e2d81eb3e854642b5dca97600fd73c7_9366/Firebird_Track_Pants_Black_ED6897_25_model.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;"> 
<span id="overlay_text" style="
  transform: rotate(270deg);
  position: absolute;
  top: +90px;
  z-index: 3;
  background-color:white;
  line-height:50px"> SOLD OUT </span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br>
<a href="https://www.mywebsite.com/item1.html">https://www.mywebsite.com/item1.html</a>
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------------------------------------------<br>

<strong>2)Item 2</strong><br>
<div style="text-align: right;">65<br> </div>
<div style="position: relative; z-index: 1;"></div>
<img src="https://assets.adidas.com/images/w_840,h_840,f_auto,q_auto:sensitive,fl_lossy/bf500e3fd9c74e458cf4aaf00125990a_9366/Firebird_Track_Pants_Blue_FM3813_01_laydown.jpg" height="768" width="980" alt="Flower" style="position: absolute; z-index: 2;">
<span id="overlay_text" style="position: relative; top: -10px; z-index: 3;background-color:white;line-height:50px"></span>
<br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br> <br><br><br>
<a href="https://www.mywebsite.com/item2.html">https://www.mywebsite.com/item2.html</a>
<br>Available Sizes:XS,S,M,L,XL,2XL
<br>------------------------------------------------

How to place

2 Answers2