code-injection Need help re. Hover on 7.1 Masonry Gallery

Site URL: https://jaycefox.squarespace.com/

Can anyone suggest a code that will allow these captions to only appear on hovers?

The site's url is https://jaycefox.squarespace.com and the password is "fox"

Here is the code I am currently using...

p.gallery-caption-content {
    font-size: 22px !important;
}

figcaption.gallery-caption.gallery-caption-grid-masonry  {
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    color: white;
    left: 0;
    text-align: center;
  img:hover
}

On 5/3/2022 at 6:34 AM, fbook said:

Site URL: https://jaycefox.squarespace.com/

Can anyone suggest a code that will allow these captions to only appear on hovers?

The site's url is https://jaycefox.squarespace.com and the password is "fox"

 

 

Here is the code I am currently using...

 

 

p.gallery-caption-content {
    font-size: 22px !important;
}

figcaption.gallery-caption.gallery-caption-grid-masonry  {
    position: absolute;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    color: white;
    left: 0;
    text-align: center;
  img:hover
}

 

 

Can you enable Caption first? Then we can check & give code easier

Done, thanks so much.

On 5/11/2022 at 10:37 PM, fbook said:

Done, thanks so much.

Hi,

I don't see any caption. Can you check it again?

Yes, up now. Had to remove it as it didn't function so well and I was expecting visitors from an online promotion.

Thanks in advance for your help.

That's nice, works well!  Thanks so much for your time and expertise. 

Hi there. I've placed this code in my site, and it works, with the exception of the background color on hover – I've changed the rgba values and there remains no change on hover. Gallery is mid homepage.

Help? Thanks!

https://wrasse-green-4b2l.squarespace.com/home

On 8/19/2022 at 12:58 AM, lainecarlsness said:

Hi there. I've placed this code in my site, and it works, with the exception of the background color on hover – I've changed the rgba values and there remains no change on hover. Gallery is mid homepage.

Help? Thanks!

https://wrasse-green-4b2l.squarespace.com/home

What is access password?

pw = traci

thanks!

On 8/24/2022 at 11:42 PM, lainecarlsness said:

pw = traci

 

thanks!

Use this new code

/* Gallery Section Masonry Hover */
figure.gallery-masonry-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.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-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-masonry-item-wrapper a:after, .gallery-masonry-item-wrapper:after {
    background: rgba(0,0,0,0.95) !important; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
    pointer-events: none;
}
.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:after, .gallery-masonry-item:hover .gallery-masonry-item-wrapper:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

Then you can adjust overlay color in this line

    background: rgba(0,0,0,0.95) !important; /* overlay color */

Hi - I would also like to use this for a masonry gallery that I am just setting up. I tried the code but didn't work for me. Here's the site:

https://gerbil-herring-9m5e.squarespace.com

PW:foodwine01!

This is for the talent page - guest chefs grid. I've turned on captions. Thank you!

Hi - nevermind the 2nd code just worked - genius!

I do have one more question - how to I change the type color on rollover to white on caption and make it bold? I'm sure it's in a setting but not sure where. Thank you.

5 hours ago, dawn said:

I do have one more question - how to I change the type color on rollover to white on caption and make it bold? I'm sure it's in a setting but not sure where. Thank you.

edit this code

figcaption {
    padding: 0 !important;
}

to this

figcaption {
    padding: 0 !important;
}
figcaption * {
	color: white !important;
	font-weight: bold !important;
}

This worked perfectly - thank you again!

I have one more question on this topic. I want to make the text bigger, which I was able to do by just adding the following to to the code Tuanphan provided above.

But when going mobile it's way to big and needs to be flexible. Is there anyway to make this happen?

figcaption {
    padding: 0 !important;
}
figcaption * {
	color: white !important;
	font-weight: bold !important;
	font-size: 30px !important;
}

15 hours ago, sprecktor said:

I have one more question on this topic. I want to make the text bigger, which I was able to do by just adding the following to to the code Tuanphan provided above.

But when going mobile it's way to big and needs to be flexible. Is there anyway to make this happen?

figcaption {
    padding: 0 !important;
}
figcaption * {
	color: white !important;
	font-weight: bold !important;
	font-size: 30px !important;
}

 

 

Add this under the code

@media screen and (max-width:767px) {
figcaption * {
	font-size:20px !important;
}}

Hi! Thank you for this code! I do want to change something. I want the captions to appear under each photo instead of on top of it and become bold. 

Here is my page: zuania.com

Where I implemented the code was in the commercial tab. 

Thank you!

9 hours ago, Zuania said:

Hi! Thank you for this code! I do want to change something. I want the captions to appear under each photo instead of on top of it and become bold. 

 

Here is my page: zuania.com

Where I implemented the code was in the commercial tab. 

Thank you!

 

Can you enable caption first? Currently I don't see any caption