How to place <span overlay text vertically over an image?
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>
2 answers
solution1
1 2020-04-19 00:33:47
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>
solution2
1 2020-04-19 01:01:39
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>------------------------------------------------
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to place a text as a overlay on a image vertically aligned to top left in a div
How to vertically center text from image overlay
How to place overlay over image using JQuery?
How to place a text over an image?
How to vertically align text over an image
span text over the image
How to vertically center text in a <span>?
How to place Popup over overlay
How to place a text over an image in browser in concrete place of an image
How can I place text in the middle of an image vertically?
Related Tags