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

Gallery Grid Hover Over


mgwebsite

Question

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

4 answers to this question

Recommended Posts

  • 0

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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