# How to overlay text on images

**URL:** <https://community.glideapps.com/t/how-to-overlay-text-on-images/72437>\
**Category:** Community Resources\
**Tags:** custom-css\
**Created:** [April 9, 2024, 10:23pm UTC](https://community.glideapps.com/t/how-to-overlay-text-on-images/72437 "2024-04-09T22:23:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdo/32/36540_2.png) [@abdo](https://community.glideapps.com/u/abdo)\
**Post date:** [April 9, 2024, 10:23pm UTC](https://community.glideapps.com/t/how-to-overlay-text-on-images/72437/1 "2024-04-09T22:23:33Z")

</div>

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

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/e/ae32d3f93c91e2268a0d291062c91eaee7cce42b.jpeg "Glide Apps - Overlay text on images") ](https://www.youtube.com/watch?v=9HX6GhLyo9U)

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [April 9, 2024, 10:28pm UTC](https://community.glideapps.com/t/how-to-overlay-text-on-images/72437/2 "2024-04-09T22:28:57Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![abdo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/abdo/32/36540_2.png) [@abdo](https://community.glideapps.com/u/abdo)\
**Post date:** [April 9, 2024, 10:36pm UTC](https://community.glideapps.com/t/how-to-overlay-text-on-images/72437/3 "2024-04-09T22:36:49Z")

</div>

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

here is the html used in the rich text component

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)\
**Post date:** [April 9, 2024, 10:42pm UTC](https://community.glideapps.com/t/how-to-overlay-text-on-images/72437/4 "2024-04-09T22:42:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Dan76](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dan76/32/15696_2.png) [@Dan76](https://community.glideapps.com/u/Dan76)\
**Post date:** [April 10, 2024, 2:07am UTC](https://community.glideapps.com/t/how-to-overlay-text-on-images/72437/5 "2024-04-10T02:07:42Z")

</div>

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