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 13
  • Views 2k
  • 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?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
  • 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 10 months later...

Hey @tuanphan

I've just stumbled upon this thread, and wondered if you can help me?

I've implemented the above code, and it works fine - though I can't get the Descriptions to appear on hover? I'd also like the white text to appear in the custom font that has been uploaded to the site.

Any ideas would be greatly appreciated!

Thanks,

Adam

 

The page question is CLIENTS once you enter the site.

deer-iris-4czx.squarespace.com
PW: M7123

 

Graphic Design / Football / Music

Link to comment
On 2/16/2024 at 5:26 PM, Adr_81 said:

Hey @tuanphan

I've just stumbled upon this thread, and wondered if you can help me?

I've implemented the above code, and it works fine - though I can't get the Descriptions to appear on hover? I'd also like the white text to appear in the custom font that has been uploaded to the site.

Any ideas would be greatly appreciated!

Thanks,

Adam

 

The page question is CLIENTS once you enter the site.

deer-iris-4czx.squarespace.com
PW: M7123

 

I see you figured it out? With custom font, use CSS like this

.image-slide-title {
    font-family: 'Blender-Pro-Medium.otf' !important;
}

image.png.e43a9e8b7bda70c3894023032a183f17.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hey @tuanphan

I've just stumbled upon this thread, and wondered if you can help me?

I've implemented the above code, and it works fine - though I can't get the Descriptions to appear on hover? I'd also like the white text to appear in the custom font that has been uploaded to the site.

Any ideas would be greatly appreciated!

Thanks,

Adam

 

The page question is CLIENTS once you enter the site.

deer-iris-4czx.squarespace.com
PW: M7123

 

Graphic Design / Football / Music

Link to comment

Text you entered in Description box won't appear in frontend, you will need to use custom code to add new description text.

First, edit Title text, from CLIENT to

CLIENT <span>Helping a bank to be itself</span>

Next, use this code  to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".image-slide-title").each(function(){
    $(this).html($(this).text());
  });
});
</script>

Next, use this code to Custom CSS box

.image-slide-title span {
	display: block;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (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...

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.