Hover Text Grid Gallery

Site URL: https://www.inspirewellnessandnutrition.com/our-suggestions

Hey guys!

I am trying to design this resources page with thumbnail images and descriptive text. I would live the text to appear when hovering on images.

Right now, the text (title) is not full when hovering. It's only showing an excerpt in the box and the full text in a separate grey box. (see screenshot)

Could you please help me with the CSS? Or is there better option for same results?

Thank you in advance!

1 hour ago, mathildeeeeee said:

Site URL: https://www.inspirewellnessandnutrition.com/our-suggestions

Hey guys!

 

I am trying to design this resources page with thumbnail images and descriptive text. I would live the text to appear when hovering on images.

Right now, the text (title) is not full when hovering. It's only showing an excerpt in the box and the full text in a separate grey box. (see screenshot)

Could you please help me with the CSS? Or is there better option for same results?

 

Thank you in advance!

Try to add this into Design->Custom css

.sqs-gallery.sqs-gallery-design-grid .slide .margin-wrapper:hover .image-slide-title {
    white-space: initial;
    text-overflow: initial;
    padding-top: 10%;
    height: 30%;
}

@bangank36 thank you!!! 😁

@mathildeeeeee I see on tablet, navigation contact us item break to new line. You can add this to Design > Custom CSS to make all on same line.

/* Nav same line */
@media screen and (max-width:900px) and (min-width:641px) {
div#topNav li {
    margin-left: 5px;
    font-size: 12px;
}
}

On 12/20/2020 at 9:19 AM, tuanphan said:

@mathildeeeeee I see on tablet, navigation contact us item break to new line. You can add this to Design > Custom CSS to make all on same line.

/* Nav same line */
@media screen and (max-width:900px) and (min-width:641px) {
div#topNav li {
    margin-left: 5px;
    font-size: 12px;
}
}

thanks @tuanphan 😉