Adding a background colour on hover in a Summary Block, Wall Style 7.1

How can I format the preview blocks of a Summary Block in a Wall Layout so that they highlight with a background colour around the image and behind the text when you hover? The example goal is like in this site's blog summaries : https://textilesandmateriality.com/

I can't figure out the right CSS to make it happen.

Can you share link to page where you use Summary Block. We can help easier

10 hours ago, tuanphan said:

Can you share link to page where you use Summary Block. We can help easier

https://ferret-grouse-kmhh.squarespace.com/

pword: abi123

Hi. I see you solved with this code?

.sqs-gallery-design-autogrid .summary-item:hover {
    background-color: #e9795d !important;
    box-shadow: 1px 1px 8px 2px rgba(0,0,0,.2) !important;
    opacity: 1;
    transition: ease-in-out .3s;
}

@tuanphan That's what I want it to look like,  but in the summary layout "wall" instead of "grid. I have only figured out how to do it for "grid" which is my second choice 😞 

16 hours ago, abi123 said:

@tuanphan That's what I want it to look like,  but in the summary layout "wall" instead of "grid. I have only figured out how to do it for "grid" which is my second choice 😞 

Can you change to wall layout? We will check again.

Hi @tuanphan, the site url is now: https://www.migrationandmobility.ca/

and the password to access is: mobility

Thanks,

Abi

On 1/22/2021 at 10:16 AM, abi123 said:

Hi @tuanphan, the site url is now: https://www.migrationandmobility.ca/

and the password to access is: mobility

Thanks,

Abi

Use new code

body.homepage .summary-item:hover {
    background-color: #e9795d !important;
    box-shadow: 1px 1px 8px 2px rgba(0,0,0,.2) !important;
    opacity: 1;
    transition: ease-in-out .3s;
}