Adding an image to appear on portfolio hover

Site URL: https://pentagon-apple-msys.squarespace.com/

Hi! I'm looking to have an image appear on a hover over the portfolio grid instead of a color overlay.

I've gotten some code to change the color on the hover overlay, but just wondering if there's a line of code to put in the CSS to initiate the image on hover.

Thank you! Example of what my portfolio grid looks like below.

Hello,

Could you please add a private password to your page, or website, and share that with us. Currently, we are blocked from entering the site. Once you've done that we can better assist you. Also, are you looking to add a single image to overlay all photos or a different overlay for each portfolio item?

-Dan

Thanks for letting me know! Password: test

Would actually love to have something different for each portfolio item as long as the code isn't too insane!

12 hours ago, mcmullian said:

Thanks for letting me know! Password: test

Would actually love to have something different for each portfolio item as long as the code isn't too insane!

Hi. Same image for all projects or different images?

Would love to do a different image for each project!

On 6/20/2021 at 12:00 AM, mcmullian said:

Would love to do a different image for each project!

 

Add to Design > Custom CSS. Repeat for other projects

/* Project 1 */
a.grid-item[href="/work/the-ruse-lmgj6"] {
    background-size: cover;
    background-image: url(https://cdn.pixabay.com/photo/2015/07/09/23/09/cadaques-838724__340.jpg);
}
a.grid-item[href="/work/the-ruse-lmgj6"]:hover img {
    visibility: hidden;
}
/* project 2 */
a.grid-item[href="/work/american-portraiture-lzgfe"] {
    background-size: cover;
    background-image: url(https://cdn.pixabay.com/photo/2021/06/15/13/20/banded-demoiselle-6338620__340.jpg);
}
a.grid-item[href="/work/american-portraiture-lzgfe"]:hover img {
    visibility: hidden;
}