i've been trying to use angular masonry. I've been trying to do something like when hovering over an image, the image will darken, and the caption will be more exposed (high-contrast) over the image to be able to read it properly. However, when i try to hover over the image, the caption, or in my case i call it header, within my image disappears (or apparently also affected by darkening the image).
To fully understand what i mean, please see this Sample Code on StackBlitz
I've been trying to do this in purely css so that in my angular code would've handle only those data, and screen transition (routerlinks). I leave styling to CSS and other Libraries (i.e Angular Masonry)
The problem is that the .feed-header is sitting behind the filter, so you need to set a z-index on that class:
.masonry-item
.feed-container
.feed-header {
position: absolute;
width: 100%;
padding: 10px;
align-items: center;
display: flex;
z-index: 9;
}
Also, if you want to make the text contrast, you may want to set it to white on hover (to contrast with the dark filter). You can do so using:
.masonry-item
.feed-container:hover
.feed-header {
color: white;
}