Jump to content

Need help re. Hover on 7.1 Masonry Gallery

Go to solution Solved by tuanphan,

Recommended Posts

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
}

 

 

Screen Shot 2022-05-02 at 7.20.28 PM.png

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

 

 

Screen Shot 2022-05-02 at 7.20.28 PM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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.

Edited by fbook
expanded communication
Link to comment
  • Solution
On 5/16/2022 at 11:37 PM, fbook said:

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.

Try adding this to Design > Custom CSS

body.homepage {
/* Masonry hover 2 */
figure.gallery-grid-item {
    position: relative;
}
.gallery-caption, .gallery-caption-wrapper {
    position: static !important;
    z-index: 100 !important;
    top: unset;
    transform: unset;
    height: initial;
    opacity: 1 !important;
}
/* 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.5); /* 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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 2 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
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 */

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 5 months later...

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

 

 

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.