Jump to content

Image overlay hover in 7.1 Masonry Grid

Recommended Posts

Hey,

Is it possible to have an image overlay so that it changes the image on hover? From what I can tell it is not possible with Masonry Grid. I have 30+ images on the page that I want to have a rollover on.

Many thank in advance!

 

Link to comment

You mean

You have a Masonry Grid with 30+ images

You want: when users hover on each image >> change it to another image?

If yes, it is possible, you can share link to page where you use Masonry, I will give some code to achieve this

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 3/13/2024 at 7:15 PM, nickbarr said:

Hey,

Correct with the above. Below is the page with images in Masonry that I would like to have image hover that changes image.

https://www.nickbarr.co

Many thanks! 

You can use some code like this to Website > Website Tools > Custom CSS

a.gallery-masonry-image-link[href="/ssense-stories-2024"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/08/11/04/51/fireworks-8182800_1280.jpg);
}
a.gallery-masonry-image-link[href="/glossier-ultralip-generation-g"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/11/20/13/21/mountain-8401084_1280.png);
}
a.gallery-masonry-image-link[href="/ssense-gift-guide-2023"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/09/11/16/44/roses-8247285_1280.jpg);
}

image.thumb.png.b3e34b153b177644b9a465df1eee1375.png

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
Posted (edited)

Wow, works amazingly! Very much appreciated.

Just a side note, when hovering over the image for the first time there is a slight flash of a black and or slow loading tine for the hover image. Assuming nothing that can be done about that. Website loading etc...?

Here is my other code in the CSS, slight hover zoom, nothing crazy.

@media screen and (min-width:768px) {
/* masonry-gallery-image-grow-on-hover sqs.7.1  */
.gallery-masonry-wrapper :hover img {
               display: inline-block;
               vertical-align: middle;
               -webkit-transform: translateZ(0);
                       transform: translateZ(0);
               box-shadow: 0 0 1px rgba(0, 0, 0, 0);
               -webkit-backface-visibility: hidden;
                       backface-visibility: hidden;
                   -moz-osx-font-smoothing: grayscale;
               -webkit-transition-duration: 0.3s ;
                       transition-duration: 0.3s ;
               -webkit-transition-property: transform;
                       transition-property: transform;
             }
            .gallery-masonry-wrapper :hover img,
             .gallery-masonry-wrapper:active img {
               -webkit-transform: scale(1.0) ;
                       transform: scale(1.02) ;}
}
  
.header-nav-item a:hover {
    text-decoration: underline;
}
.header-nav-wrapper a {
    background-image: none !important;
}
@media screen and (max-width:767px) {
.homepage {
.gallery-masonry-wrapper {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: static !important;
    width: 100% !important;
    transform: unset !important;
    margin-bottom: 20px;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry-item img {
    width: 100% !important;
}
}
}
/* Gallery one column */
@media screen and (max-width:767px) {
.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
    margin-bottom: 20px;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
}
 /* END Gallery One Column */

/* spacing site title - next section */
section.products.collection-content-wrapper {
    padding-top: 0;
}
.homepage #page section:first-child {
    padding-top: 80px !important;
}
[data-section-id="6052c0d10d9ceb298c75d305"] {
  padding-bottom: 20px !important;
}
[data-section-id="6052c0d10d9ceb298c75d305"] {
  padding-top: 90px !important;
}
[data-section-id="5eb335cef2e2f001a99b8bcd"] {
  padding-top: 90px !important;
}
[data-section-id="5eb335cef2e2f001a99b8bcd"] {
  padding-bottom: 20px !important;
}

#collection-6373e6025f63a91d1e47e50d header {display:none}

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
    .gallery-masonry-item-wrapper {
    height: auto !important;
    margin-bottom: 10px !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 10 !important;
    padding-right: 10 !important;
  }}
 

Edited by nickbarr
Link to comment

Yes. If you want to fix this, will need to use another code to add hover image

a.gallery-masonry-image-link {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
/* Image 1 */
a.gallery-masonry-image-link[href="/ssense-stories-2024"]:hover img {
    opacity: 0;
}
a.gallery-masonry-image-link[href="/ssense-stories-2024"] {
    background-image: url(https://cdn.pixabay.com/photo/2023/08/11/04/51/fireworks-8182800_1280.jpg);
}
/* Image 2 */
a.gallery-masonry-image-link[href="/glossier-ultralip-generation-g"]:hover img {
    opacity: 0;
}
a.gallery-masonry-image-link[href="/glossier-ultralip-generation-g"] {
    background-image: url(https://cdn.pixabay.com/photo/2023/11/20/13/21/mountain-8401084_1280.png);
}
/* image 3 */
a.gallery-masonry-image-link[href="/ssense-gift-guide-2023"]:hover img {
   opacity: 0;
}
a.gallery-masonry-image-link[href="/ssense-gift-guide-2023"] {
    background-image: url(https://cdn.pixabay.com/photo/2023/09/11/16/44/roses-8247285_1280.jpg);
}

 

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
Posted (edited)

Great, thank you. Only slight issue I see now is with different browser sizes... that the overlay is a pixel or two bigger, you see a slight border especially at the bottom. 

And is there a way to disable it on mobile, so the hover image does not flash up when you click the image?

So I can keep all my previous code and just replace the below with the new supplied code.

a.gallery-masonry-image-link[href="/ssense-stories-2024"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/08/11/04/51/fireworks-8182800_1280.jpg);
}

Screenshot 2024-03-16 at 2.39.39 PM.png

Screenshot 2024-03-16 at 2.39.45 PM.png

Edited by nickbarr
Link to comment
On 3/16/2024 at 5:29 PM, nickbarr said:

Great, thank you. Only slight issue I see now is with different browser sizes... that the overlay is a pixel or two bigger, you see a slight border especially at the bottom. 

And is there a way to disable it on mobile, so the hover image does not flash up when you click the image?

So I can keep all my previous code and just replace the below with the new supplied code.

a.gallery-masonry-image-link[href="/ssense-stories-2024"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/08/11/04/51/fireworks-8182800_1280.jpg);
}

Screenshot 2024-03-16 at 2.39.39 PM.png

Screenshot 2024-03-16 at 2.39.45 PM.png

Did you solve it? It looks no border to me now

with mobile, use this CSS code to disable

@media screen and (max-width:991px) {
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    opacity: 1 !important;
}
}

 

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
  • 2 weeks later...

Hey,

 

So code is working great, thank you very much!!!

Just a couple of notes:

-The background image when on hover appears a little pixelated / crunchy (if that help describe it).

-When the browser is set to a different size, e.g. not full screen or an odd size you do sometime see the background image appear underneath by a pixel or two. Very rarely, just out of interest why.

Link to comment
On 3/27/2024 at 11:24 PM, nickbarr said:

Hey,

 

So code is working great, thank you very much!!!

Just a couple of notes:

-The background image when on hover appears a little pixelated / crunchy (if that help describe it).

-When the browser is set to a different size, e.g. not full screen or an odd size you do sometime see the background image appear underneath by a pixel or two. Very rarely, just out of interest why.

#1. You try change background-size: cover;

to

background-size: contain;

#2. Can you take a screenshot of problem?

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
  • 2 weeks later...

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.