How can I replicate the hover effect on element grid thumbnails for full-width rows?

[thomasmaier]

Hello,

On this web page there are (under "Magazin") two thumbnails next to each other (element grid thumbnails) and I want to replicate the same hover effect for the full-width thumbnail above. How can I do that (with custom CSS)? https://aaarea.com

I had to use background image with text on top, because the "featured image" is always square and too tall if used full-width.

I managed to get the darkening of the background going, but not the zoom. How can I achieve that?

[thomasmaier]

I found it out!

.background-image img {
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

.background-image img:hover {
    filter: brightness(0.5);
    -webkit-filter: brightness(0.5);
    transform: matrix(1.05, 0, 0, 1.05, 0, 0);
}

[Richard]

Awesome @thomasmaier thanks for posting!! 🌝