# Semi-transparent banner at the bottom of an image

**URL:** <https://community.glideapps.com/t/semi-transparent-banner-at-the-bottom-of-an-image/33646>\
**Category:** Ask for Help\
**Created:** [October 27, 2021, 1:39pm UTC](https://community.glideapps.com/t/semi-transparent-banner-at-the-bottom-of-an-image/33646 "2021-10-27T13:39:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)\
**Post date:** [October 27, 2021, 1:39pm UTC](https://community.glideapps.com/t/semi-transparent-banner-at-the-bottom-of-an-image/33646/1 "2021-10-27T13:39:55Z")

</div>

![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/2/822f3d5e2a2691769a082e820d2b8282901fa785.jpeg)

Greetings to the entire group.  
I ask as always to the mythical gurus of the CSS, a suggestion on how to improve the aspect of the card that I enclose.  
In the bottom section, which is the one where Avatar and Caption are displayed, the visibility is destroyed by the image.  
Is there a way in which to overlay a semi-transparent background that can best display that information?  
Also, can the floating button be moved higher up?  
Thanks as always to those who can advise me.

P.S.  
I would like to thank San Fetch and its developer who allowed me to draw data from OpenWeatherMap and its API to allow me to display weather data.

---

<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:** [October 27, 2021, 2:41pm UTC](https://community.glideapps.com/t/semi-transparent-banner-at-the-bottom-of-an-image/33646/2 "2021-10-27T14:41:25Z")

</div>

Is this a card or a tiles layout?

---

<div class="post-metadata">

**Author:** ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)\
**Post date:** [October 27, 2021, 2:42pm UTC](https://community.glideapps.com/t/semi-transparent-banner-at-the-bottom-of-an-image/33646/3 "2021-10-27T14:42:48Z")

</div>

Tiles layout

---

<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:** [October 27, 2021, 11:43pm UTC](https://community.glideapps.com/t/semi-transparent-banner-at-the-bottom-of-an-image/33646/4 "2021-10-27T23:43:57Z")

</div>

I’m not sure why your floating button is that high up? Maybe because of the “bottom bar” CSS?

Anyway, here’s how I do it.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/c/3cfd0b2336960fe0adc229e571d42fef9f2468c4.jpeg)

```auto
<pre><span><style>

[data-test="tile-item"] .tile-overlay {
background: linear-gradient(0deg, rgba(0, 0, 0, 2) 0%, rgba(0, 0, 0, 0) 70%);
}

.fab-target >* {
position:fixed;
bottom: 18%;
right: 5%;
}

```

Basically add more black color to the background, and change the bottom % for the floating button.

---

<div class="post-metadata">

**Author:** ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)\
**Post date:** [October 28, 2021, 6:08pm UTC](https://community.glideapps.com/t/semi-transparent-banner-at-the-bottom-of-an-image/33646/5 "2021-10-28T18:08:20Z")

</div>

> [@ThinhDinh](#):
>
> ```auto
> .fab-target >* {
> position:fixed;
> bottom: 18%;
> right: 5%;
> }
> 
> ```

Awesome! You have solved my problem. Thank you very much @ThinhDinh 🙌 💪