Image Overlay With Text

Support
#1

I would like the images on my home page to have text show up when hovered over.
thanks

#2

Hi there,

I suggest that you follow the steps mentioned in this thread:

Thank you.

1 Like
#3

sorry, you lost me. i tried to apply what i could but failed. Further instructions we be appreaciated.

#4

never mind, thanks

#5

You’re welcome! Glad it’s okay now.

#6

Hi there,

Im a bit confused about how to do this as well.

I got everything up to the point where its mentioned

“You can add your custom CSS code to the .textoverimage .img-desc selector which is the selector of the text over the image.”

If you can assist with this part, I would greatly appreciate it!

Many thanks,

#7

Hey There,

That last step is meant if you want to add more styling to the overlay text. For example, if want to add a green background color, you will update the css code

.textoverimage .img-desc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 20px;
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);

   background-color: green;
}

Hope this helps.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.