Semi-transparent banner at the bottom of an image

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.

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.

Is this a card or a tiles layout?

Tiles layout

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.


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

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

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


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

1 Like