Jump to content

Gallery Grid -> Display Title & Description On Hover

Go to solution Solved by tuanphan,

Recommended Posts

I've been trying to display the title and description of these images in a gallery grid on hover. I've been searching the forums and found some helpful code, but nothing that's exactly what I'm looking for. 

This is the code I am currently using (see below). It is displaying only the title on hover. I need it to display the title and description on hover. Does anyone have any suggestions?

I'm on 7.0 an the Template is Five.

Thanks in advance.

The website:

https://www.toneworx.com/demo

and the code:

 

.slide a:after {
    position: absolute;
    content: "";
      display: block !important;
    background: rgba(236,112,8,0.8);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
    pointer-events: none;
      padding: 35px;
}
.slide a {
    position: relative;
}
.slide a {
    position: relative;
    opacity: 1 !important;
}
.slide:hover a:after {
    opacity: 1;
}
.image-slide-title {
    font-size: 20px !important;
    font-weight:normal;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 70%!important;
    color: white;
    opacity: 0;
    z-index: 1000;
    transition: all 0.5s;
    pointer-events: none;
      padding: 50px !important;
      line-break: normal;
    white-space: initial !important;
      text-align: center !important;
      text-justify: none;
}
.slide:hover .image-slide-title {
    opacity: 1;
}

Edited by amrizo
Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Hi tuanphan,

thank you for your response.

The text showed on that pictures was inserted in the Title Field of the Picture when creating the gallery. I changed the text, so it illustrates better what it is (See the picture below).

The text from the Title field isn't bad but it has some limitations like the 200 Max. characters, that for some Descriptions it could be too short. That's why I'm looking for a way to show the description of the picture (on SS 7.0).

Thanks in advance for your help.

Adrian

galllery_input.jpg

Link to comment
50 minutes ago, amrizo said:

Hi tuanphan,

thank you for your response.

The text showed on that pictures was inserted in the Title Field of the Picture when creating the gallery. I changed the text, so it illustrates better what it is (See the picture below).

The text from the Title field isn't bad but it has some limitations like the 200 Max. characters, that for some Descriptions it could be too short. That's why I'm looking for a way to show the description of the picture (on SS 7.0).

Thanks in advance for your help.

Adrian

galllery_input.jpg

I check that you are using gallery block on this part. And the image you share on edit mode seems not like this (like image block)

So what exactly do you want to achieve? on gallery block or image block?

Greeting, it's 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, Lightbox Studio plugin
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
  • Solution

It looks like the gallery doesn't support to show Description info to page structure

You try adding this code to Title, to see if it appears on live page or not

This is a title 01 <p>This is a description 01</p>

Add then let me know, if it work/doesn't work, keep p tag, then we can try some code

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 3/8/2023 at 11:59 PM, amrizo said:

Hi tuanphan,

thanks again for your response. That worked fine. Is there any way to override the 200 characters limit on title Title field?

Hi,

It looks like no way to remove this limit

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

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.