How to overlay text on images

Community Resources
1

:bridge_at_night: Use a rich text component with html to overlay text on images
very simple steps for images in screens & custom collections

11 Likes
2

Very nice. I would be nice if this were native.

Any chance you could also share the HTML and CSS you used?

1 Like
3

I used to love the tag option in the old Glide!

here is the html used in the rich text component

<div style="
position: relative; 
width: 100%; 
padding-top: 75%;">

<img src="imageURL" 
style="
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
object-fit: cover; 
border-radius: 10px;
margin-top: 0px;
">

<div style="
border: 3px solid white;
position: absolute; 
top: 10px; 
left: 10px; 
background-color: #94B34D; 
color: white; 
padding: 5px 10px;
border-radius: 10px; 
font-weight: bold; 
font-size: 14px;">Category
</div>

<div style="
border: 3px solid white;
position: absolute; 
top: 10px; 
right: 10px; 
background-color: black; 
color: white; 
padding: 5px 10px;
border-radius: 10px; 
font-weight: bold; 
font-size: 14px;">Price</div>

<div style="
border: 3px solid white;
position: absolute; 
bottom: 10px; 
left: 50%; 
transform: translateX(-50%);
background-color: rgba(0,0,0,0.7);
color: white; 
padding: 5px 10px;
border-radius: 10px; 
font-weight: bold; 
font-size: 14px;">
ItemName
</div>


</div>
4 Likes
4

I used to use it too. Sometimes I wish Glide found a way to make it work.

Perhaps the design team at Glide decided that tags and text overlays were a disappearing trend. Also, I remember cases where the overlays didn’t display well because of contrast issues. I agree with the overall premise that if the feature at its most basic level creates display issues, then it probably shouldn’t be there in the first place.

1 Like
5

Wow thanks Abdo, this is so good and worked perfectly.

1 Like