Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Simple rollover for grid gallery 7.1


matthewhodges

Question

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 post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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"]

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,

This is perfect for me, thank you so much!

Posted Images

8 answers to this question

Recommended Posts

  • 1
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

Greeting, it's BaNgan from 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, Animated Heading Block
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 post
  • 0
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;
}
}

 

Link to post
  • 0
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
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...