Hover Effect for Masonry Grid | 7.1

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

Can you share link to your site?

1 minute ago, tuanphan said:

Add to Home > Design > Custom CSS

figure.gallery-masonry-item:hover img {
    filter: grayscale(1);
}

 

Hmm.. That seems to just add a grey filter over the image -- Is there a way to just darken it?

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;
}

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

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?

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?

Try this CSS

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

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

@media screen and (max-width:767px) {
.gallery-masonry-item {
    padding-bottom: 0 !important;
}
}

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

🙂

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 

8 minutes ago, dianap said:

Still not working 😞 

Sorry I'm being so picky!!

I see you moved title under image

this invalid

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

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

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

🙂

@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!

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? 

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

@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?

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

Sorry @tuanphan! Try now?

PW: LINCHPIN

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
}

@tuanphan!You're amazing. Love your work. You're getting me through this edit, ha. Thank you.

@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;
}

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;
}