Gallery Grid -> Display Title & Description On Hover

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

Hi,

I see description only, no title. Can you explain it a bit clearly?

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

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

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?

I would like to achieve the effect on a gallery block (grid).

The screenshot I posted above was from the edit gallery page.

Hi tuanphan,

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

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

That's a shame. Anyhow, many thanks for your help tuanphan!

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

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

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

Thanks @tuanphan!

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