Grid Gallery - Changing images on hover - Brine 7.0 template

I'd like to add an image gallery grid and make it so that when you hover over each image in the grid, a different image displays. Is this possible? If it is possible, can someone provide the css code? I can plug in the block IDs myself. Thank you!

19 hours ago, marztiroo said:

I'd like to add an image gallery grid and make it so that when you hover over each image in the grid, a different image displays. Is this possible? If it is possible, can someone provide the css code? I can plug in the block IDs myself. Thank you!

I think we can set it manually through Css style for each item.

Kindly share your site with the protected password to check it together

Hello. Our website is https://www.hendrxhealth.com. Below are the images that we'd like to change on hover. Thanks for your help!

On 11/30/2021 at 2:16 AM, marztiroo said:

Hello. Our website is https://www.hendrxhealth.com. Below are the images that we'd like to change on hover. Thanks for your help!

Add to Design > Custom CSS

/* Gallery images on hover */
div#block-yui_3_17_2_1_1638064932204_46870 {
.slide:hover img {
    visibility: hidden;
}
.slide:nth-child(1):hover a {
    background-image: url(https://cdn.pixabay.com/photo/2019/08/25/08/17/modern-4428919__340.jpg);
}
.slide:nth-child(2):hover a {
    background-image: url(https://cdn.pixabay.com/photo/2021/11/16/15/35/technology-6801334__340.jpg);
}
.slide:nth-child(3):hover a {
    background-image: url(https://cdn.pixabay.com/photo/2021/11/09/16/34/building-6781885__340.jpg);
}}