Simple rollover for grid gallery 7.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);
}

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