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

Squarespace 7.1 Masonry Gallery, caption on hover but linkable?


Question

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

Link to comment
  • Answers 23
  • Created
  • Last Reply

Top Posters For This Question

23 answers to this question

Recommended Posts

  • 0
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

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
  • 0

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

Link to comment
  • 0
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.

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
  • 0
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?

image.thumb.png.014974c2811789cbf1db40cd135f0675.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
  • 0
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 :( 

image.thumb.png.0ce692f0902ed8584e53fbef3fabbe68.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
  • 0
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

 

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
  • 0
On 5/6/2021 at 10:12 PM, mixedbyandrea said:

@tuanphan

thanks sooo v much for this man

worked like a charm !

Cheers

A

Do you want to fix these?

1. (Tablet-Footer) Want to increase line spacing in email text?

andrealepori.com-01-min.png

2. (Tablet-Homepage) Huge spacing

andrealepori.com-02-min.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
  • 0
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;
}
}

 

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
  • 0

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 !

A9C96FC6-6621-4492-A575-80B8AE89D62E.png

Link to comment
  • 0
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 !

A9C96FC6-6621-4492-A575-80B8AE89D62E.png

Can you describe the desired layout on full screen?

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
  • 0
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?

image.thumb.png.d11b24f09f0ede5a549eb0bd36d10228.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
  • 0
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}

 

 

Link to comment
  • 0
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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...