<![CDATA[How can I replicate the hover effect on element grid thumbnails for full-width rows?]]>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?

]]>https://laythemeforum.com/topic/7312/how-can-i-replicate-the-hover-effect-on-element-grid-thumbnails-for-full-width-rowsRSS for NodeTue, 18 Aug 2026 20:07:47 GMTMon, 01 Nov 2021 09:47:10 GMT60<![CDATA[Reply to How can I replicate the hover effect on element grid thumbnails for full-width rows? on Mon, 01 Nov 2021 20:15:28 GMT]]>Awesome @thomasmaier thanks for posting!! 🌝

]]>https://laythemeforum.com/post/27093https://laythemeforum.com/post/27093Mon, 01 Nov 2021 20:15:28 GMT<![CDATA[Reply to How can I replicate the hover effect on element grid thumbnails for full-width rows? on Mon, 01 Nov 2021 10:37:18 GMT]]>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);
}
]]>https://laythemeforum.com/post/27081https://laythemeforum.com/post/27081Mon, 01 Nov 2021 10:37:18 GMT