Squarespace 7.1 Masonry Gallery, caption on hover but linkable?

Site URL: https://www.andrealepori.com

Hey guys,

Hope you're all doing well, 
I am having some trouble using a CSS custom code in order to make nicer captions on my new website.
The idea would be to have my credits for each album showing up on hover while being linkable to an external url (spotify)
Anyone could help me with this?

I am currently using this bit of CSS, but can't make the links working?being clickable again.

Hope it makes some sense

 

figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}

.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
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: 0.6;
    transition: all 0.5s;
}

figcaption {
    padding: 0 !important;
}

Hi. What is password?

Hey man,

thanks so much for your reply

Pw S@ulGr3n4ds

Cheers

On 4/12/2021 at 4:47 PM, mixedbyandrea said:

Hey man,

 

thanks so much for your reply

Pw S@ulGr3n4ds

Cheers

It looks like you solved? I see it can clickable here

hey @tuanphan

I've just applied a simple <a href to the actual descriptions  - not the best solution but a bit of a quick workaround I'd say. Still need to figure out how to make every image clickable despite the caption being on hover and the scale transform. If that makes any sense....

Cheers

On 4/15/2021 at 6:50 PM, mixedbyandrea said:

hey @tuanphan

I've just applied a simple <a href to the actual descriptions  - not the best solution but a bit of a quick workaround I'd say. Still need to figure out how to make every image clickable despite the caption being on hover and the scale transform. If that makes any sense....

 

Cheers

Hi. Try removing a href on 1 image, then let me know. I will try checking that image easier.

Hey @tuanphan

I've duplicated that home here 
www.andrealepori.com/test

Removed a href from the first 4 images

Let me know if t helps at all?

Cheers

3 hours ago, mixedbyandrea said:

Hey @tuanphan

 

I've duplicated that home here 
www.andrealepori.com/test

Removed a href from the first 4 images

Let me know if t helps at all?

Cheers

 

Have you added link in this box yet?

Hey @tuanphan

yes I did, actually

but they don’t work unfortunately 

I’ve updated the link now in that same page so you can check it out

Cheers

22 hours ago, mixedbyandrea said:

Hey @tuanphan

yes I did, actually

but they don’t work unfortunately 

I’ve updated the link now in that same page so you can check it out

Cheers

 

 

Hi, I don't see any images :( 

so weird here's how I see it in Chrome Mac 

On 4/20/2021 at 2:58 PM, mixedbyandrea said:

Hey @tuanphan

 

I've duplicated that home here 
www.andrealepori.com/test

Removed a href from the first 4 images

Let me know if t helps at all?

Cheers

 

Remove this code

figure.gallery-masonry-item .gallery-masonry-item-wrapper:before {
    background-color: rgba(0,0,0,.8);
    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:before {
    opacity: 1;
    transition: all .3s
}

.gallery-caption {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 102%;
    text-align: top;
    opacity: 0;
    transition: all .3s ease;
    background-color: transparent;
    height: 100%
}

.gallery-masonry-item:hover .gallery-caption {
    opacity: 1;
    transition: all .9s ease
}

.gallery-caption-wrapper {
    display: flex;
    place-items: center;
    justify-content: center
}

.gallery-grid-lightbox-link:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9999
}

Add this code

figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.75); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

https://www.loom.com/share/5344d004fcad4f7b8f350219bac1b8bf

@tuanphan

thanks sooo v much for this man

worked like a charm !

Cheers

A

Hey @tuanphan

I’d love to, but not sure how

thanks a million !

A

On 5/10/2021 at 2:50 AM, mixedbyandrea said:

Hey @tuanphan

I’d love to, but not sure how

thanks a million !

A

Add to Design > Custom CSS

/* tablet issues */
@media screen and (max-width:767px) {
/* footer email line spacing */
div#block-706d28dbd3f6b1dcce07 p {
    line-height: 20px;
}
/* home huge spacing */
div#block-yui_3_17_2_1_1618358544464_4769 {
    display: none;
}
footer.sections section {
    min-height: unset !important;
}
}

Hey @tuanphan

thank you sooo much. that seems to work really well.

Can I be v cheeky and ask your advise on how to sort the top design on bigger screens ?

this is how the header and text at the top L ook like on a 2560x1440 px display - full screen.

Do you happen to know how can I sort this to properly fit on bigger screens ?

thanks a lot for all your great help !

On 5/16/2021 at 7:05 PM, mixedbyandrea said:

Hey @tuanphan

thank you sooo much. that seems to work really well.

Can I be v cheeky and ask your advise on how to sort the top design on bigger screens ?

this is how the header and text at the top L ook like on a 2560x1440 px display - full screen.

Do you happen to know how can I sort this to properly fit on bigger screens ?

thanks a lot for all your great help !

Can you describe the desired layout on full screen?

Absolutely,

I'd like to get it to look always like this attached - no matter the display resolution?

Thanks a lot !
A

Hi @tuanphan

sorry to bother again,

any idea on how could I achieve this ?

thanks a lot! 

On 6/1/2021 at 8:13 PM, mixedbyandrea said:

Hi @tuanphan

sorry to bother again,

any idea on how could I achieve this ?

 

thanks a lot! 

I see it looks fine. What problem here?

9 hours ago, tuanphan said:

I see it looks fine. What problem here?

Hi @tuanphan

on larger resolution displays it looks like this ⬇️ Not sure how to fix it. 
cheers

On 4/24/2021 at 10:57 AM, tuanphan said:

 

Add this code

figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-masonry-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after {
    background: rgba(0,0,0,0.75); /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

This code worked perfect for me. But when I'm trying to add zoom hover effect for gallery masonry with this code, the hover effect doesn't work. Do you know why?

Hover zoom code:

.gallery-masonry-item img:hover{height:100%!important;
width:100%!important; transform:Scale(1.2);
overflow:hidden!important;}
Gallery-code-name{overflow:hidden!important}

On 10/5/2021 at 10:32 PM, NGO2045 said:

This code worked perfect for me. But when I'm trying to add zoom hover effect for gallery masonry with this code, the hover effect doesn't work. Do you know why?

Hover zoom code:

.gallery-masonry-item img:hover{height:100%!important;
width:100%!important; transform:Scale(1.2);
overflow:hidden!important;}
Gallery-code-name{overflow:hidden!important}

 

 

Can you share link to gallery on your site? We can check easier

Using the code for the hover over is there a way to increase the caption font size or change colour?

On 12/16/2021 at 4:00 PM, CoiaCreative said:

Using the code for the hover over is there a way to increase the caption font size or change colour?

Add this code

.gallery-caption * {
	color: red !important;
	font-size: 50px !important;
}