Semi-transparent banner at the bottom of an image

Ask for Help
1

1107Ă—2436 604 KB

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.

2

Is this a card or a tiles layout?

3

Tiles layout

4

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
image582Ă—1230 69.5 KB 

<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.

6 Likes
5

Awesome! You have solved my problem. Thank you very much @ThinhDinh :raised_hands: :muscle:

1 Like