Jump to content

Gallery Grid Hover Over

Recommended Posts

Site URL: https://magnolia-hawk-8wyh.squarespace.com/results

Hi! I am looking to get some help creating a hover over in a gallery grid. I've found some code from these forums that works , but I am having a hard time customizing what I want it to look like. Can someone help me get it where the first part is bolded with the subtitle smaller, regular and underneath? See attached image. It might be worth noting that have two fonts I'm using through CSS. When I started to try to add code it started messing with the stylizating of the fonts through the whole site. Thanks!

Website: https://magnolia-hawk-8wyh.squarespace.com/results
Password for site: thisisart

 

// Galler Image Hover in Desing > CSS//
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%;
    color: white;
    text-align: center; 
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #002554; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.65;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

 

Screen Shot 2020-11-16 at 9.29.08 AM.png

Link to comment
  • Replies 4
  • Created
  • Last Reply

You can try to place html into the caption

<h2>Diligord</h2>
<p>Lorem ipsum</p>

btw, I got some gallery effect to choose if you like 

https://beyondspace7-1.squarespace.com/?password=1234

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
13 minutes ago, bangank36 said:

You can try to place html into the caption


<h2>Diligord</h2>
<p>Lorem ipsum</p>

btw, I got some gallery effect to choose if you like 

https://beyondspace7-1.squarespace.com/?password=1234

Thanks, @bangank36! These are cool. Is there a way to further customize it? When I put in the heading tags in the caption my blue heading doesn't show up on the dark overlay. I want this to be white and smaller, and I want the subtitle to be a bit bigger.

Link to comment
3 hours ago, mgwebsite said:

@bangank36: Is there a way to turn it off on mobile and provide another solution? It doesn't appear to be responsive. 

You are asking about your original code snippet? how it looks on mobile now?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

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