# Image with text overlay in Glide Pages

**URL:** https://community.glideapps.com/t/image-with-text-overlay-in-glide-pages/59217
**Category:** Ask for Help
**Created:** [March 15, 2023, 10:08pm UTC](https://community.glideapps.com/t/image-with-text-overlay-in-glide-pages/59217 "2023-03-15T22:08:57Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![byhazellim](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/byhazellim/32/55170_2.png) [@byhazellim](https://community.glideapps.com/u/byhazellim)
#### Post date: [March 15, 2023, 10:08pm UTC](https://community.glideapps.com/t/image-with-text-overlay-in-glide-pages/59217/1 "2023-03-15T22:08:57Z")

</div>

I’ve seen quite a few images with a text overlay Q&A that mentions Tiles. I can’t find this feature in Glide Pages! How can I do it?

I want to create a background image and have dynamic text added on top of the image.

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [March 15, 2023, 10:50pm UTC](https://community.glideapps.com/t/image-with-text-overlay-in-glide-pages/59217/2 "2023-03-15T22:50:29Z")

</div>

“Tile” with text overlay was in Glide Apps, not Pages. If it’s a do filar image, you can always use a container with an image background and fill it with a text component. Otherwise, if you need image with text overlay for every image in a collection, might want to look into Cloudinary:

> [@Cloudinary: Image Filters and Overlays in Glide!](https://community.glideapps.com/t/cloudinary-image-filters-and-overlays-in-glide/4917):
>
> Thanks to @ionamol for keying me into Cloudinary for on the fly, URL based image editing! This awesome resource allowed me to gray out badges that haven’t yet been earned by the user— Started by uploading the image into Cloudinary and then using the built in tools to generate the new URL. Used this URL schema to create this formula: Then, simply created an if/then in Glide. If the badge was owned by the user, then use the colored URL, i…

---

<div class="post-metadata">

### Author: ![byhazellim](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/byhazellim/32/55170_2.png) [@byhazellim](https://community.glideapps.com/u/byhazellim)
#### Post date: [March 15, 2023, 11:55pm UTC](https://community.glideapps.com/t/image-with-text-overlay-in-glide-pages/59217/3 "2023-03-15T23:55:26Z")

</div>

Is there a way to put this container of image within another container? The image is supposed to be displayed alongside a form on a 1:1 display

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [March 16, 2023, 12:14am UTC](https://community.glideapps.com/t/image-with-text-overlay-in-glide-pages/59217/4 "2023-03-16T00:14:12Z")

</div>

Not yet. Containers within containers isn’t possible. If you’re on the business plan, you can use CSS to add images and backgrounds to any component.

---

<div class="post-metadata">

### Author: ![Denis\_Mwendia](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/denis_mwendia/32/66168_2.png) [@Denis\_Mwendia](https://community.glideapps.com/u/Denis_Mwendia)
#### Post date: [November 7, 2023, 2:42pm UTC](https://community.glideapps.com/t/image-with-text-overlay-in-glide-pages/59217/5 "2023-11-07T14:42:41Z")

</div>

Could you please show me how to do this in 2023 as many features both in glide and cloudinary have changed

---

<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: [November 7, 2023, 2:49pm UTC](https://community.glideapps.com/t/image-with-text-overlay-in-glide-pages/59217/6 "2023-11-07T14:49:15Z")

</div>

Image with any type of overlay (text, favorite icon) is not available in Glide anymore (Nov. 2023). It might make a comeback, but for now it’s not available.

---

<div class="post-metadata">

### Author: ![Denis\_Mwendia](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/denis_mwendia/32/66168_2.png) [@Denis\_Mwendia](https://community.glideapps.com/u/Denis_Mwendia)
#### Post date: [November 7, 2023, 3:06pm UTC](https://community.glideapps.com/t/image-with-text-overlay-in-glide-pages/59217/7 "2023-11-07T15:06:18Z")

</div>

How about using cloudinary?

---

<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: [November 7, 2023, 3:20pm UTC](https://community.glideapps.com/t/image-with-text-overlay-in-glide-pages/59217/8 "2023-11-07T15:20:18Z")

</div>

In the past many have used Cloudinary to edit images on the fly. It probably still works fine. Have you tried?

I personally don’t use Cloudinary, I like to stick to native features as much as possible.

Whatever text information I would have liked to include in an overlay I try to include instead in the name, description and meta fields in the collection. The favorite action can be replaced by an collection item action or perhaps by including a white heart emoji 🤍 and red heart emoji ❤ in one of the text fields with a template column.

---

<div class="post-metadata">

### Author: ![Denis\_Mwendia](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/denis_mwendia/32/66168_2.png) [@Denis\_Mwendia](https://community.glideapps.com/u/Denis_Mwendia)
#### Post date: [November 7, 2023, 3:36pm UTC](https://community.glideapps.com/t/image-with-text-overlay-in-glide-pages/59217/9 "2023-11-07T15:36:30Z")

</div>

I saw @Robert_Petitto had this idea on chat component by adding an image next to a text using html. is this applicable so I could may be add a small image next to the text. Maybe if rich text would support it

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [November 7, 2023, 9:06pm UTC](https://community.glideapps.com/t/image-with-text-overlay-in-glide-pages/59217/10 "2023-11-07T21:06:31Z")

</div>

Certainly possible. Here’s an example:

 ![CleanShot 2023-11-07 at 16.06.47](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/5/e5cb07b3813c218485c91061a51a0f50927069ce.jpeg)

```auto
<div style="position: relative; display: inline-block;">
  <img src="[img]" alt="[text] image" style="max-width: 100%; height: auto;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.3); color: #fff; padding: 20px;font-size:20px;border-radius:10px;">[text] </div>
</div>

```

---

<div class="post-metadata">

### Author: ![Denis\_Mwendia](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/denis_mwendia/32/66168_2.png) [@Denis\_Mwendia](https://community.glideapps.com/u/Denis_Mwendia)
#### Post date: [November 7, 2023, 9:28pm UTC](https://community.glideapps.com/t/image-with-text-overlay-in-glide-pages/59217/11 "2023-11-07T21:28:18Z")

</div>

@Robert_Petitto problem solved

---

<div class="post-metadata">

### Author: ![Denis\_Mwendia](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/denis_mwendia/32/66168_2.png) [@Denis\_Mwendia](https://community.glideapps.com/u/Denis_Mwendia)
#### Post date: [November 7, 2023, 10:02pm UTC](https://community.glideapps.com/t/image-with-text-overlay-in-glide-pages/59217/12 "2023-11-07T22:02:47Z")

</div>

Is there a way I could display images horizontally using the rich text whereby they would auto scroll. Or anything close to that as I can see html can do something related to that if only the rich text component would accept it

---

<div class="post-metadata">

### Author: ![Denis\_Mwendia](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/denis_mwendia/32/66168_2.png) [@Denis\_Mwendia](https://community.glideapps.com/u/Denis_Mwendia)
#### Post date: [November 7, 2023, 10:27pm UTC](https://community.glideapps.com/t/image-with-text-overlay-in-glide-pages/59217/13 "2023-11-07T22:27:20Z")

</div>

> [@Robert\_Petitto](#):
>
> ```auto
> <div style="position: relative; display: inline-block;">
> <img src="[img]" alt="[text] image" style="max-width: 100%; height: auto;">
> <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.3); color: #fff; padding: 20px;font-size:20px;border-radius:10px;">[text] </div>
> </div>
> 
> ```

Is it possible to add overlays like you did using cloudinary. If it is I would be greatful if you would make an update to the tutorial made some years back as there are so much that has changed. Your effort is really appreciated.

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [November 7, 2023, 11:40pm UTC](https://community.glideapps.com/t/image-with-text-overlay-in-glide-pages/59217/14 "2023-11-07T23:40:51Z")

</div>

Here’s the relevant article on Cloudinary.

> **[Apply Overlay and Underlay Transformations | Cloudinary](https://cloudinary.com/documentation/layers)**
>
> Place image, text, or other layers on (or under) existing assets to generate new and customized creations on the fly.