Replace/change image on hover for Project pages in portfolio

Site URL: https://kazoo-sparrow-xwe9.squarespace.com

Hi,

So i have 5 projects on my site right now. I want to change the hover effect on the cover of my projects so when you hover over it the image changes to a different image. How do I do that?

My site password: fall

Add to Home > Design > Custom CSS. Repeat similar for other projects

/* Change image on portfolio item hover */
a.grid-item[href="/work/mlbxfit"]:hover img {
    visibility: hidden;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
a.grid-item[href="/work/mlbxfit"]:hover .grid-image-inner-wrapper {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg) !important;
}

Hey I tried using the CSS provided above and it works but the hover image isn't confined to the width of the wrapper. What am I doing wrong here?

Here's the code I used from above:
/* Change image on portfolio item hover */
a.grid-item[href="/work/anxiocalm"]:hover img {
    visibility: hidden;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
a.grid-item[href="/work/anxiocalm"]:hover .grid-image-inner-wrapper {
    background-image: url(https://static1.squarespace.com/static/607f2d7caeff013b864be14f/t/6081c16961f7c44a415b5cb6/1619116393840/anxio-car-hover.png) !important;
}

On 4/23/2021 at 1:54 AM, BenWatch said:

Hey I tried using the CSS provided above and it works but the hover image isn't confined to the width of the wrapper. What am I doing wrong here?

Here's the code I used from above:
/* Change image on portfolio item hover */
a.grid-item[href="/work/anxiocalm"]:hover img {
    visibility: hidden;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
a.grid-item[href="/work/anxiocalm"]:hover .grid-image-inner-wrapper {
    background-image: url(https://static1.squarespace.com/static/607f2d7caeff013b864be14f/t/6081c16961f7c44a415b5cb6/1619116393840/anxio-car-hover.png) !important;
}

try this

/* Change image on portfolio item hover */
a.grid-item[href="/work/anxiocalm"]:hover img {
    visibility: hidden;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
a.grid-item[href="/work/anxiocalm"]:hover .grid-image-inner-wrapper {
    background-image: url(https://static1.squarespace.com/static/607f2d7caeff013b864be14f/t/6081c16961f7c44a415b5cb6/1619116393840/anxio-car-hover.png) !important;
background-repeat: no-repeat;
background-size: contain;
}

That worked perfectly, thank you!

So good. Thank you so much tuanphan. I've used so many of your answers

On 4/24/2021 at 8:10 AM, tuanphan said:

try this

/* Change image on portfolio item hover */
a.grid-item[href="/work/anxiocalm"]:hover img {
    visibility: hidden;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
a.grid-item[href="/work/anxiocalm"]:hover .grid-image-inner-wrapper {
    background-image: url(https://static1.squarespace.com/static/607f2d7caeff013b864be14f/t/6081c16961f7c44a415b5cb6/1619116393840/anxio-car-hover.png) !important;
background-repeat: no-repeat;
background-size: contain;
}

 

Is there a way to add a transition to this? 

On 5/18/2022 at 10:27 AM, joecookjc said:

Is there a way to add a transition to this? 

Try this code

/* Change image on portfolio item hover */
a.grid-item[href="/work/anxiocalm"]:hover img {
    visibility: hidden;
	transition: all 0.3s;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
transition: all 0.3s;
}
a.grid-item[href="/work/anxiocalm"]:hover .grid-image-inner-wrapper {
    background-image: url(https://static1.squarespace.com/static/607f2d7caeff013b864be14f/t/6081c16961f7c44a415b5cb6/1619116393840/anxio-car-hover.png) !important;
background-repeat: no-repeat;
background-size: contain;
transition: all 0.3s;
}