Portfolio Grid - Unique Images on Hover

Site URL: https://www.arielokin.com/test-page-reverse-hover

Hi! I'm trying to build out a project landing page using the portfolio (Grid Overlay) and want to customize each project's hover with a unique image. I know how to overlay an image, but not a photo that is unique to each product since there are no block IDs associated to each project. Is it possible to do so?

For additional context, it would essentially be reversing this image and hover set up minus a few decorative details.

Thank you!

On 11/4/2021 at 3:22 AM, skali said:

Site URL: https://www.arielokin.com/test-page-reverse-hover

Hi! I'm trying to build out a project landing page using the portfolio (Grid Overlay) and want to customize each project's hover with a unique image. I know how to overlay an image, but not a photo that is unique to each product since there are no block IDs associated to each project. Is it possible to do so?

For additional context, it would essentially be reversing this image and hover set up minus a few decorative details.

Thank you!

Do you mean adding one image overlay for all items when hovering them?

@bangank36 I currently have a portfolio in Grid Overlay set up and want each image in that portfolio to hover with an image unique to that project instead of having the overlay apply to all the images.

Not sure if this is possible with the portfolio or if I could achieve this differently? 

Hopefully that makes sense. Thank you!

@skali Try adding this to Design > Custom CSS

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

(the code for first image, if it works, I will send code for other items)

On 11/9/2021 at 10:07 PM, tuanphan said:

@skali Try adding this to Design > Custom CSS

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

(the code for first image, if it works, I will send code for other items)

@tuanphan this is perfect! Is there a way to integrate a slower transition?

On 11/12/2021 at 3:57 AM, skali said:

@tuanphan this is perfect! Is there a way to integrate a slower transition?

try this

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

3 hours ago, tuanphan said:

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

@tuanphan Thanks! This gets me close, but the caption seems to be transitioning at a different speed than the background image. Do you have any thoughts on how they could both move at the same speed?

Also, is there a way I can target certain projects to disable the hover completely?

Thanks!!

15 hours ago, skali said:

@tuanphan Thanks! This gets me close, but the caption seems to be transitioning at a different speed than the background image. Do you have any thoughts on how they could both move at the same speed?

Also, is there a way I can target certain projects to disable the hover completely?

Thanks!!

#1. Use this new code.

a.grid-item[href*="/westchester"] {
  &:hover img {
      visibility: hidden;
          transition: opacity ease 100ms;
  }
 img {
    transition: opacity ease 100ms;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
&:hover .grid-image-inner-wrapper {
    background-image: url(https://static1.squarespace.com/static/605ca059ca12273e08012873/t/6182ebfe907f2f58f9d0fdb4/1635970050490/DDP_5231-1-web.jpg) !important;
    background-size: cover !important
}}

#2. Disable hover for text + image?

6 hours ago, tuanphan said:

#1. Use this new code.

a.grid-item[href*="/westchester"] {
  &:hover img {
      visibility: hidden;
          transition: opacity ease 100ms;
  }
 img {
    transition: opacity ease 100ms;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
&:hover .grid-image-inner-wrapper {
    background-image: url(https://static1.squarespace.com/static/605ca059ca12273e08012873/t/6182ebfe907f2f58f9d0fdb4/1635970050490/DDP_5231-1-web.jpg) !important;
    background-size: cover !important
}}

#2. Disable hover for text + image?

@tuanphan 

Thank you!

For #2 (disabling the hover), I'm looking to have the third project image (Coming Soon: Kenilworth, IL) remain as-is. https://www.arielokin.com/test-page-reverse-hover

So, having it stay the blue background with white border with the caption text in the middle. Right now the hover makes it disappear.

On 11/15/2021 at 9:31 PM, skali said:

@tuanphan 

Thank you!

For #2 (disabling the hover), I'm looking to have the third project image (Coming Soon: Kenilworth, IL) remain as-is. https://www.arielokin.com/test-page-reverse-hover

So, having it stay the blue background with white border with the caption text in the middle. Right now the hover makes it disappear.

Add to Design > Custom CSS

a.grid-item[href*="kenilworth-il"] .portfolio-text {
    opacity: 1 !important;
}

On 11/15/2021 at 8:28 AM, tuanphan said:

#1. Use this new code.

a.grid-item[href*="/westchester"] {
  &:hover img {
      visibility: hidden;
          transition: opacity ease 100ms;
  }
 img {
    transition: opacity ease 100ms;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
&:hover .grid-image-inner-wrapper {
    background-image: url(https://static1.squarespace.com/static/605ca059ca12273e08012873/t/6182ebfe907f2f58f9d0fdb4/1635970050490/DDP_5231-1-web.jpg) !important;
    background-size: cover !important
}}

#2. Disable hover for text + image?

Right now I have this working with GIFs but they're large and clunky. I'd like to be able to use a video format instead.

Is there a way to do this same thing with a WebM or Vimeo embed instead?

Just now, roganmay said:

Right now I have this working with GIFs but they're large and clunky. I'd like to be able to use a video format instead.

Is there a way to do this same thing with a WebM or Vimeo embed instead?

Sorry, I meant to do @tuanphan

@tuanphan Thanks again for helping me with this code a few months ago (above). I've used this on a new project but wanted to see if you had any ideas on how to make the transition between the two images a bit smoother? Right now it feels like it stops then flips to the 2nd image.

https://mcbridearchitects.squarespace.com/all-projects

PW: test123

Here is the code I'm using (on the Sean Scully Studio project):

a.grid-item[href*="/sean-scully-studio"]:hover img {
    visibility: hidden;
    transition: all 0.5s;
}
a.grid-item[href*="/sean-scully-studio"] img {
    transition: all 0.5s;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
a.grid-item[href*="/sean-scully-studio"]:hover .grid-image-inner-wrapper {
    background-image: url(https://static1.squarespace.com/static/613f9b163516f400c275c22b/t/622e3c080696395c7c99de4f/1647197195676/1b.Scully+Studio-web.jpg) !important;
  background-size: cover !important;
  position: absolute !important;
  width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center !important;

}

Change your code to this code

On 3/25/2022 at 11:36 AM, skalison said:

@tuanphan Thanks again for helping me with this code a few months ago (above). I've used this on a new project but wanted to see if you had any ideas on how to make the transition between the two images a bit smoother? Right now it feels like it stops then flips to the 2nd image.

https://mcbridearchitects.squarespace.com/all-projects

PW: test123

Here is the code I'm using (on the Sean Scully Studio project):

a.grid-item[href*="/sean-scully-studio"]:hover img {
    visibility: hidden;
    transition: all 0.5s;
}
a.grid-item[href*="/sean-scully-studio"] img {
    transition: all 0.5s;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
a.grid-item[href*="/sean-scully-studio"]:hover .grid-image-inner-wrapper {
    background-image: url(https://static1.squarespace.com/static/613f9b163516f400c275c22b/t/622e3c080696395c7c99de4f/1647197195676/1b.Scully+Studio-web.jpg) !important;
  background-size: cover !important;
  position: absolute !important;
  width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center !important;

}

Change your code to this code

a.grid-item[href*="/sean-scully-studio"]:hover img {
    visibility: hidden;
    transition: all 0.5s;
}
a.grid-item[href*="/sean-scully-studio"] img {
    transition: all 0.5s;
}
.grid-image-inner-wrapper:after {
    visibility: hidden;
}
a.grid-item[href*="/sean-scully-studio"] .grid-image-inner-wrapper {
    background-image: url(https://static1.squarespace.com/static/613f9b163516f400c275c22b/t/622e3c080696395c7c99de4f/1647197195676/1b.Scully+Studio-web.jpg) !important;
  background-size: cover !important;
  position: absolute !important;
  width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center !important;
}

(I removed a :hover attribute)