Jump to content

Simple rollover for grid gallery 7.1

Recommended Posts

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.

Edited by matthewhodges
Link to comment
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);
}

 

image.thumb.png.6ada32ee8f2bb59fb9dc3d3d39322714.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

image.thumb.png.766b564b4901373814c36b8e9231937c.png

Edited by tuanphan

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...
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!

 

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

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

Edited by JDMD
Link to comment
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..?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 weeks later...

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!

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
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:




 

Screen Shot 2022-05-08 at 19.01.23.png

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




 

Screen Shot 2022-05-08 at 19.01.23.png

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.