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

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

 

 

 

 

Share this post


Link to post

Can you share link to your site?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
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?

Share this post


Link to post
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;
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
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!!!

Share this post


Link to post
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?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
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?

 

Share this post


Link to post

Try this CSS

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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
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.. 

Share this post


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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
8 minutes ago, dianap said:

Still not working 😞 

Sorry I'm being so picky!!

I see you moved title under image


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

this invalid

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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
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!!

Share this post


Link to post

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 and explore my free code snippets for Brine at rodvaldr.dev

Share this post


Link to post
Posted (edited)

@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

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
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
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
Posted (edited)

@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

Share this post


Link to post

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

 

 

Share this post


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