Simple rollover for grid gallery 7.1

Site URL: https://www.matthodgesdesign.com/

Is it possible to add simple image rollover effects to a grid gallery in 7.1? All I want for the image to change to a second image on mouse/cursor hover, and then change back on hover off (preferably with a smooth transition). Clearly this isn't possible with the standard controls, but wondering if possible using CSS and custom files? I've been searching online (and on here) and not found the answer, which is surprising in that I would have thought this would be a sought after feature.

On my site I have added a simple brightness hovereffect to the images which gives it some interactivity. But preferably I would find away to change to a second image on mouse hover.

On 1/9/2021 at 12:50 AM, matthewhodges said:

Site URL: https://www.matthodgesdesign.com/

Is it possible to add simple image rollover effects to a grid gallery in 7.1? All I want for the image to change to a second image on mouse/cursor hover, and then change back on hover off (preferably with a smooth transition). Clearly this isn't possible with the standard controls, but wondering if possible using CSS and custom files? I've been searching online (and on here) and not found the answer, which is surprising in that I would have thought this would be a sought after feature.

On my site I have added a simple brightness hovereffect to the images which gives it some interactivity. But preferably I would find away to change to a second image on mouse hover.

You can use this trick, notice the nth(1) nth(2) is indicated the first and second image, you can assign different image for next item that way

section[data-section-id="5eeb4b1243290c2c625c7dcc"] .gallery-grid-item .gallery-grid-item-wrapper img {
  opacity: 1;
}
section[data-section-id="5eeb4b1243290c2c625c7dcc"] .gallery-grid-item:hover .gallery-grid-item-wrapper img {
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  opacity: 0;
}
section[data-section-id="5eeb4b1243290c2c625c7dcc"] .gallery-grid-item .gallery-grid-image-link {
  z-index: 999;
}
section[data-section-id="5eeb4b1243290c2c625c7dcc"] .gallery-grid-item .gallery-grid-item-wrapper:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
section[data-section-id="5eeb4b1243290c2c625c7dcc"] .gallery-grid-item:hover .gallery-grid-item-wrapper:after {
  opacity: 1;
}
section[data-section-id="5eeb4b1243290c2c625c7dcc"] .gallery-grid-item:nth-child(1) .gallery-grid-item-wrapper:after {
  background-image: url(https://www.nps.gov/common/uploads/stories/images/nri/20160426/articles/5097608B-1DD8-B71B-0BB1933DB95CC94C/5097608B-1DD8-B71B-0BB1933DB95CC94C.jpg);
}
section[data-section-id="5eeb4b1243290c2c625c7dcc"] .gallery-grid-item:nth-child(2) .gallery-grid-item-wrapper:after {
  background-image: url(https://www.nps.gov/common/uploads/stories/images/nri/20151216/articles/C6E16F5A-1DD8-B71B-0BAB45B9358DD9C8/C6E16F5A-1DD8-B71B-0BAB45B9358DD9C8.jpg);
}

This is perfect for me, thank you so much!

@matthewhodges I see pagination is not line up on mobile. If you want, we will give the code

On 1/18/2021 at 2:11 AM, tuanphan said:

@matthewhodges I see pagination is not line up on mobile. If you want, we will give the code

Hi – that would be great thanks

I would also like the social media icons to be centre aligned on mobile if possible?

16 hours ago, matthewhodges said:

I would also like the social media icons to be centre aligned on mobile if possible?

Add to Design > Custom CSS

/* center footer social */
@media screen and (max-width:767px) {
footer.sections nav.sqs-svg-icon--list {
    text-align: center;
}
}

On 1/18/2021 at 2:11 AM, tuanphan said:

@matthewhodges I see pagination is not line up on mobile. If you want, we will give the code

Can you give me the code for this also? Thanks!

On 2/19/2021 at 8:33 PM, matthewhodges said:

 

Can you give me the code for this also? Thanks!

It looks like you used Text Block to add Pagination? Thus, each page will need a different code.

You can convert it to Code Block, so each code will apply on all pages.

If you don't like, add this to Design > Custom CSS

/* line up pagination */
@media screen and (max-width:767px) {
div#page-section-5f33fb39d1a58655fa13f609>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
}

This code for https://www.matthodgesdesign.com/signage-mountview

On 1/8/2021 at 5:50 PM, matthewhodges said:

Site URL: https://www.matthodgesdesign.com/

Is it possible to add simple image rollover effects to a grid gallery in 7.1? All I want for the image to change to a second image on mouse/cursor hover, and then change back on hover off (preferably with a smooth transition). Clearly this isn't possible with the standard controls, but wondering if possible using CSS and custom files? I've been searching online (and on here) and not found the answer, which is surprising in that I would have thought this would be a sought after feature.

On my site I have added a simple brightness hovereffect to the images which gives it some interactivity. But preferably I would find away to change to a second image on mouse hover.

I would love some help with this as well! 

https://www.chloebthomas.com/print-design

Password: abcd

I have been struggling with different ways in which to change one image to another upon hover (I would like to apply this to all of my portfolio images on multiple pages) in a grid style gallery page.

They are all gallery pages within a folder if that affects anything as well.

Thank you so much in advance!

On 11/9/2021 at 2:06 AM, C-bear said:

 

I would love some help with this as well! 

https://www.chloebthomas.com/print-design

Password: abcd

I have been struggling with different ways in which to change one image to another upon hover (I would like to apply this to all of my portfolio images on multiple pages) in a grid style gallery page.

They are all gallery pages within a folder if that affects anything as well.

Thank you so much in advance!

 

For 24 images in this page? https://www.chloebthomas.com/print-design

On 11/10/2021 at 9:46 AM, tuanphan said:

For 24 images in this page? https://www.chloebthomas.com/print-design

Yes please!

On 11/12/2021 at 1:47 AM, C-bear said:

Yes please!

 

Add to Design > Custom CSS

/* Print-Design change images on hover */
body#collection-617aa9142ddc1e3f94ea4a7e {
span.thumb:hover img {
    visibility: hidden;
    background-repeat: no-repeat;
    background-size: cover;
}
/* image 1 */
span.thumb:nth-child(1) {
    background-image: url(https://cdn.pixabay.com/photo/2021/09/15/15/48/seals-6627197__340.jpg);
}
/* image 2 */
span.thumb:nth-child(2) {
    background-image: url(https://cdn.pixabay.com/photo/2021/11/05/12/27/woman-6771288__340.jpg);
}
/* image 3 */
span.thumb:nth-child(3) {
    background-image: url(https://cdn.pixabay.com/photo/2021/10/23/03/35/mountain-6734031__340.jpg);
}
}

Repeat the code for other images

Hi, I'm new to the forum having been directed here by the Squarespace help team. Pretty funny how they basically just say, "sorry but you're better off asking other users"! 😂

So my fellow users, I've searched the topics and this thread seems to be about what I'm hoping to do. Here's what I'd like to do if possible - on my "meet the team" page, there's a photo of each team member (a "sensible" head and shoulders portrait type) I thought it would be a nice touch, if when you hover the mouse/curser over a photo, it switches to a second photo, maybe of that person when they were a kid, or just doing something silly. Just to make it a bit more personal and fun.  

I have very little tech knowledge about how to implement this kind of stuff though sorry! Having read some of the correspondence here, it looks like a foreign language to me!! So a) is that possible? and b) is there a way of explaining how to do this, to a simpleton like me!??

Here's the page:
https://www.thegardenersonline.com/meet-the-team

My site uses the "Bedford" template.

Thanks for reading x

On 12/2/2021 at 4:08 AM, JDMD said:

Hi, I'm new to the forum having been directed here by the Squarespace help team. Pretty funny how they basically just say, "sorry but you're better off asking other users"! 😂

So my fellow users, I've searched the topics and this thread seems to be about what I'm hoping to do. Here's what I'd like to do if possible - on my "meet the team" page, there's a photo of each team member (a "sensible" head and shoulders portrait type) I thought it would be a nice touch, if when you hover the mouse/curser over a photo, it switches to a second photo, maybe of that person when they were a kid, or just doing something silly. Just to make it a bit more personal and fun.  

I have very little tech knowledge about how to implement this kind of stuff though sorry! Having read some of the correspondence here, it looks like a foreign language to me!! So a) is that possible? and b) is there a way of explaining how to do this, to a simpleton like me!??

Here's the page:
https://www.thegardenersonline.com/meet-the-team

My site uses the "Bedford" template.

Thanks for reading x

Do you still need help with image 2,3,4..?

Hi @tuanphan I would love something similar to what you have done above. I have a Gallery and on the thumbnails the hover gives a transparent color and centrally aligned title caption. 

I would like to replicate this exactly on normal images elsewhere on my site. So when you rollover the image it fills in with a transparent color and has the same type style, then links to another page when clicked. 

Can you help with me this please? 

Thanks!

On 1/3/2022 at 11:58 AM, Oz_Soma said:

Hi @tuanphan I would love something similar to what you have done above. I have a Gallery and on the thumbnails the hover gives a transparent color and centrally aligned title caption. 

I would like to replicate this exactly on normal images elsewhere on my site. So when you rollover the image it fills in with a transparent color and has the same type style, then links to another page when clicked. 

Can you help with me this please? 

Thanks!

You can add some image blocks, add links, then share link to page where you added them, we will check & give the code to achieve this. You can add 2-3 images, if the code works, you can add other later

On 11/14/2021 at 6:08 AM, tuanphan said:

Add to Design > Custom CSS

/* Print-Design change images on hover */
body#collection-617aa9142ddc1e3f94ea4a7e {
span.thumb:hover img {
    visibility: hidden;
    background-repeat: no-repeat;
    background-size: cover;
}
/* image 1 */
span.thumb:nth-child(1) {
    background-image: url(https://cdn.pixabay.com/photo/2021/09/15/15/48/seals-6627197__340.jpg);
}
/* image 2 */
span.thumb:nth-child(2) {
    background-image: url(https://cdn.pixabay.com/photo/2021/11/05/12/27/woman-6771288__340.jpg);
}
/* image 3 */
span.thumb:nth-child(3) {
    background-image: url(https://cdn.pixabay.com/photo/2021/10/23/03/35/mountain-6734031__340.jpg);
}
}

Repeat the code for other images

Hi @tuanphan

Thanks for all your help in this forum! I"m trying to do this and have read through your directions on various forum questions and i'm struggling with my site. 

The challenge is I have my gallery grid in a page in 7.1 and can't seem to get any css code to work. I'd like to make all these images on this page change to another image upon hover, but nothing is working. It stays static. Open to any direction on how to get this to work.

Link: https://onion-snail-wjhl.squarespace.com/artist-portfolio

Thanks for your support! 

On 4/11/2022 at 8:23 AM, MLS108 said:

Hi @tuanphan

Thanks for all your help in this forum! I"m trying to do this and have read through your directions on various forum questions and i'm struggling with my site. 

The challenge is I have my gallery grid in a page in 7.1 and can't seem to get any css code to work. I'd like to make all these images on this page change to another image upon hover, but nothing is working. It stays static. Open to any direction on how to get this to work.

Link: https://onion-snail-wjhl.squarespace.com/artist-portfolio

Thanks for your support! 

Hi,

I don't think the code will work with Filter Code.

The only way to change the image on hover is use CSS to target the items based on the sequence number. But when you click on the filter links, the order of the items will change, the code won't work properly.

Thank you so much @tuanphan. That makes complete sense. Can I apply an over all hover css , like a zoom on hover? or does the filter make it impossible to do that?

On 4/16/2022 at 12:45 AM, MLS108 said:

Thank you so much @tuanphan. That makes complete sense. Can I apply an over all hover css , like a zoom on hover? or does the filter make it impossible to do that?

Add this to Design > Custom CSS

figure:hover img {
    transform: scale(1.2);
    transition: all 0.3s;
}
.gallery-grid-item-wrapper {
    overflow: hidden;
}
figure img {
    transition: all 0.3s;
}

On 11/14/2021 at 2:08 PM, tuanphan said:

Add to Design > Custom CSS

/* Print-Design change images on hover */
body#collection-617aa9142ddc1e3f94ea4a7e {
span.thumb:hover img {
    visibility: hidden;
    background-repeat: no-repeat;
    background-size: cover;
}
/* image 1 */
span.thumb:nth-child(1) {
    background-image: url(https://cdn.pixabay.com/photo/2021/09/15/15/48/seals-6627197__340.jpg);
}
/* image 2 */
span.thumb:nth-child(2) {
    background-image: url(https://cdn.pixabay.com/photo/2021/11/05/12/27/woman-6771288__340.jpg);
}
/* image 3 */
span.thumb:nth-child(3) {
    background-image: url(https://cdn.pixabay.com/photo/2021/10/23/03/35/mountain-6734031__340.jpg);
}
}

Repeat the code for other images

Hi @tuanphan will this code also work for an Index: Gallery? (I am using version 7.0)
I am looking to achieve the same thing as the original author of this thread: "All I want for the image to change to a second image on mouse/cursor hover, and then change back on hover off (preferably with a smooth transition)."....and additionally that the second image has a clickthrough link to a page in my site.

Also, I don't know how much more complicated it would be, but ideally that second 'image' would be a group of things: overlay + svg + text. It would be nice if I didn't have to rasterize the svg logo and the text into a png. See reference below:

14 hours ago, lmnprty15 said:

Hi @tuanphan will this code also work for an Index: Gallery? (I am using version 7.0)
I am looking to achieve the same thing as the original author of this thread: "All I want for the image to change to a second image on mouse/cursor hover, and then change back on hover off (preferably with a smooth transition)."....and additionally that the second image has a clickthrough link to a page in my site.

Also, I don't know how much more complicated it would be, but ideally that second 'image' would be a group of things: overlay + svg + text. It would be nice if I didn't have to rasterize the svg logo and the text into a png. See reference below:

 

Not sure. If you share link to your site, we can take a look

On 5/9/2022 at 9:58 AM, tuanphan said:

Not sure. If you share link to your site, we can take a look

Okay sure @tuanphan, here is the website and password.

Website: https://www.jillianbuchheim.com/
Password: wFpK85EqiJ

On 5/10/2022 at 4:48 PM, lmnprty15 said:

Okay sure @tuanphan, here is the website and password.

Website: https://www.jillianbuchheim.com/
Password: wFpK85EqiJ

Try adding to Design > Custom CSS

/* item 1 */
article.Index-gallery-item:nth-child(4):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/04/13/01/40/plum-blossoms-7129214__480.jpg);
}
/* item 2 */
article.Index-gallery-item:nth-child(5):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/04/20/01/23/wedding-7144049__340.jpg);
}
/* item 3 */
article.Index-gallery-item:nth-child(6):hover img {
    content: url(https://cdn.pixabay.com/photo/2022/04/11/16/29/coffee-beans-7126154__340.jpg);
}