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

Hover Effect for Masonry Grid | 7.1


Recommended Posts

Hi all!

I need a bit of help with adding a hover effect over the masonry grid for 7.1.

I'd like the description on the masonry grid to show on hover, as well as darken the image itself.

Example: http://demo.squarestud.io/grid-gallery-9

I've read through a lot of other posts, but can't quite seem to find exactly what I am looking for. 

Any assistance would greatly be appreciated!!

 

Thank you in advance!

Diana

 

 

 

 

Link to comment
4 minutes ago, dianap said:

https://chinahousehtx.squarespace.com/home
PW: Squarespace

Thank you!

Add to Home > Design > Custom CSS

figure.gallery-masonry-item .gallery-masonry-item-wrapper:before {
    background-color: rgba(0,0,0,0.7);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    transition: all 0.5s;
}
figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper:before {
    opacity: 1;
    transition: all 0.5s;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
1 minute ago, tuanphan said:

Add to Home > Design > Custom CSS


figure.gallery-masonry-item .gallery-masonry-item-wrapper:before {
    background-color: rgba(0,0,0,0.7);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    transition: all 0.5s;
}
figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper:before {
    opacity: 1;
    transition: all 0.5s;
}

 

Perfect, thank you so much!!!! You are the best!!!

Link to comment
Just now, dianap said:

 

Sorry -- one more question -- I noticed on some of the images, the text is not exactly in the middle -- vertically and horizontally..

Is there to make the text exactly in the center of each image? For desktop and mobile?

Which image?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
5 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS


figure.gallery-masonry-item .gallery-masonry-item-wrapper:before {
    background-color: rgba(0,0,0,0.7);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    transition: all 0.5s;
}
figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper:before {
    opacity: 1;
    transition: all 0.5s;
}

 

 

 

Sorry -- one more question -- I noticed on some of the images, the text is not exactly in the middle -- vertically and horizontally..

Is there to make the text exactly in the center of each image? For desktop and mobile?

 

Link to comment
2 minutes ago, tuanphan said:

Try this CSS


.gallery-item-description {
    transform: translateY(-50%);
    top: 50% !important;
    height: 50px !important;
}

 

Perfect for all the images on desktop -- but still a littleeeeeee lower on mobile.. 

Link to comment
Just now, rodvaldr said:

Sorry, but I am a newbie to 7.1 – how can a make the title show in a masonry gallery? 

https://oboe-vuvuzela-4bha.squarespace.com

pw: Hasselblad

🙂

Follow this 

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

this invalid

{
  .gallery-item-description {
    transform: translateY(-50%);
    top: 50% !important;
    height: 50px !important;
}
    visibility: hidden;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
10 minutes ago, tuanphan said:

this invalid


{
  .gallery-item-description {
    transform: translateY(-50%);
    top: 50% !important;
    height: 50px !important;
}
    visibility: hidden;
}

 

Okay, I started from the very beginning and redid everything. It works now!!!!

 

Thank you so much!!

Link to comment

Thanks @tuanphan

I've have come a bit further. The background works on hover, and the title shows up – but click-through is not working, neither on the image or the image title. Can this be done? Javascript wizardry?
 

https://oboe-vuvuzela-4bha.squarespace.com

pw: Hasselblad

🙂

100% Squarespace since 2014. Expertise in design, typography and communications. Based in Stockholm, Sweden. Check my portfolio at rodvaldr.se

Link to comment

@tuanphan, Is it possible to show a second image on a hover, for images in a gallery in 7.1? I'd like each gallery image (currently a masonry grid) to show a second image on hover, and then those images would link to a page on my site when clicked. I'd only use this effect on my site's landing page (which is also the only page with a masonry grid). 

Site: https://seal-burgundy-yx98.squarespace.com/

Login with RobHutch

Thanks!

Edited by scottscottsee
Link to comment
21 hours ago, scottscottsee said:

@tuanphan, Is it possible to show a second image on a hover, for images in a gallery in 7.1? I'd like each gallery image (currently a masonry grid) to show a second image on hover, and then those images would link to a page on my site when clicked. I'd only use this effect on my site's landing page (which is also the only page with a masonry grid). 

Site: https://seal-burgundy-yx98.squarespace.com/

Login with RobHutch

Thanks!

You mean these images? image.thumb.png.fd4f3a6bff935b086af7d3ba8bd9cad6.png

First, edits images > Add links > then share link again, I will give the code to create hover effect

image.thumb.png.fa4b97c0c2e718973d2e2120b3a08adc.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
6 minutes ago, lincolnjubb said:

@tuanphan how are you! I've added my hover effect. However, I can't make the image click through to a link any more?

Site: https://earthworm-arugula-kzbt.squarespace.com/

What should I post into the Custom CSS editor?

 

 

your site is private

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 4/28/2020 at 5:56 PM, rodvaldr said:

Thanks @tuanphan

I've have come a bit further. The background works on hover, and the title shows up – but click-through is not working, neither on the image or the image title. Can this be done? Javascript wizardry?
 

https://oboe-vuvuzela-4bha.squarespace.com

pw: Hasselblad

🙂

 

18 minutes ago, lincolnjubb said:

@tuanphan how are you! I've added my hover effect. However, I can't make the image click through to a link any more?

Site: https://earthworm-arugula-kzbt.squarespace.com/

What should I post into the Custom CSS editor?

Remove above & use this code

figure.gallery-masonry-item .gallery-masonry-item-wrapper a:before {
    background-color: rgba(236,0,0,.5);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    transition: all .5s
}

figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:before {
    opacity: 1;
    transition: all .5s
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

@tuanphan Thank you so much for sharing this code!! I have a question, when I insert the below it breaks the links for some reason? When I remove the css Content line the link comes back but the effect is broken. Is there a way to bring the link back? Thank you!!! 

 

figure.gallery-masonry-item .gallery-masonry-item-wrapper:before {background-color: rgba(255,255,255, 0.3);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    opacity: 0;
    transition: all 0.5s;
}
figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper:before {
    opacity: 1;
    transition: all 0.5s;
}

Edited by jwhitney
Link to comment

I think I might've solved it - I changed the code to this and it seems to work! I'm not sure if it's completely correct though. 

figure.gallery-masonry-item {
  transition: all .2s ease-in-out;
}

figure.gallery-masonry-item:hover {
  background-color: #00000; 
  opacity: 0.6; 
  transition: all .2s ease-in-out;
}

 

 

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...