Opaque Image Gallery (Strips) Hover Effect

Hello all,

I'm trying to add an image hover effect on my 7.1 website. It uses a grid: strips gallery on the homepage, however I can not get any CSS to complete the hover effect. Do I need to publish the site to see the actual hover effect or will it show in the editing menu?

I would like to have a similar effect to this website, but with a whiter overlay hover. 

https://samuelelkins.co/

Thanks !

Can you share link to page where you use Gallery Strips? We can check easier.

@tuanphan

https://www.benjohnsonphoto.com/ is my website 

Add to Home > Design > Custom CSS

figure.gallery-strips-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-strips-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-strips-item-wrapper a:after {
    background: #f4f6ea;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-strips-item:hover .gallery-strips-item-wrapper a:after {
    opacity: 0.75;
}

9 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

figure.gallery-strips-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-strips-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-strips-item-wrapper a:after {
    background: #f4f6ea;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-strips-item:hover .gallery-strips-item-wrapper a:after {
    opacity: 0.75;
}

 

This worked perfectly! Thank you very much.

Hi, I'm having a similar issue with my gallery. I used the code above, which is already great, but I'm not quite there yet.

I would like to customise the captions even more, similar to the effect I obtained with the image block above.

Any chance someone can help with:

- caption justified to the centre (when the text wraps the caption is justified to the left)

- caption split in two lines (Project Name / Photographer Name)

- Font line above H2, font line below p2

Site: https://coconut-penguin-g55p.squarespace.com/

PW: MassTrial

Page: Projects

Thank you in advance!

On 1/23/2021 at 3:28 AM, FrancescoRusso said:

Hi, I'm having a similar issue with my gallery. I used the code above, which is already great, but I'm not quite there yet.

I would like to customise the captions even more, similar to the effect I obtained with the image block above.

Any chance someone can help with:

- caption justified to the centre (when the text wraps the caption is justified to the left)

- caption split in two lines (Project Name / Photographer Name)

- Font line above H2, font line below p2

 

Site: https://coconut-penguin-g55p.squarespace.com/

PW: MassTrial

Page: Projects

 

Thank you in advance!

Hi. You mean Featured Projects? It looks like you solved this?

Hi, no I mean the page "projects" first element of the menu. At the top of the page there are 5 single image blocks with the look that I'm trying to achieve, at the bottom the gallery with the partially working CSS tweak. Any idea of how to make them match as much as possible?

Thanks

Francesco

On 1/24/2021 at 1:36 AM, tuanphan said:

Hi. You mean Featured Projects? It looks like you solved this?

Sorry, not sure you've seen my message below. I'm new to the forum 

On 1/28/2021 at 12:23 PM, FrancescoRusso said:

Sorry, not sure you've seen my message below. I'm new to the forum 

Add to Design > Custom CSS

/* projects page hover */
body#collection-60097f2c66dcd12e69ed00d5 .design-layout-poster:hover .image-card-wrapper {
    background-color: rgba(255,255,255,0.3);
}

12 hours ago, tuanphan said:

Add to Design > Custom CSS

/* projects page hover */
body#collection-60097f2c66dcd12e69ed00d5 .design-layout-poster:hover .image-card-wrapper {
    background-color: rgba(255,255,255,0.3);
}

 

Thanks, but I don't think this works. Have you see the post earlier? I'll copy here again

Hi, I'm having a similar issue with my gallery. I used the code above, which is already great, but I'm not quite there yet.

I would like to customise the captions even more, similar to the effect I obtained with the image block above.

Any chance someone can help with:

- caption justified to the centre (when the text wraps the caption is justified to the left)

- caption split in two lines (Project Name / Photographer Name)

- Font line above H2, font line below p2

Site: https://coconut-penguin-g55p.squarespace.com/

PW: MassTrial

Page: Projects

Thank you in advance!

On 8/19/2020 at 4:05 PM, tuanphan said:

Add to Home > Design > Custom CSS

figure.gallery-strips-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-strips-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-strips-item-wrapper a:after {
    background: #f4f6ea;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-strips-item:hover .gallery-strips-item-wrapper a:after {
    opacity: 0.75;
}

 

I pasted this in Design - Custom CSS, but nothing happens. Any thoughts?

Thank you!

12 hours ago, tuanphan said:

Add to Design > Custom CSS

/* projects page hover */
body#collection-60097f2c66dcd12e69ed00d5 .design-layout-poster:hover .image-card-wrapper {
    background-color: rgba(255,255,255,0.3);
}

 

I was also wondering how to get the caption in a gallery to be centered, instead of beng left-positioned?

On 2/1/2021 at 8:08 AM, TheColorist said:

I pasted this in Design - Custom CSS, but nothing happens. Any thoughts?

Thank you!

Can you share link to page where you insert gallery?