Jump to content

Portfolio Grid - Unique Images on Hover

Recommended Posts

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!

Edited by skali
Additional information
Link to comment
  • Replies 13
  • Created
  • Last Reply

Top Posters In This Topic

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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@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!

Link to comment

@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)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!!

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Edited by skali
typo
Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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?

Link to comment
  • 2 months later...

@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;

}

Link to comment

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)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.