amrizo

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

Hi tuanphan,

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

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

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

Hi,

does this also work on 7.0??

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