Hover text for images

Site URL: https://www.anderslonnfeldt.com/

Hello,

I am looking for custom CSS to add a hover text effect to the images in my main gallery page.

I am attaching an image of the hovering effect I am looking for. I am reffering to the upper left image with the text "Farewell - short film"

This is my website: https://www.anderslonnfeldt.com/

Thanks in advance.

You mean

Initial: hide text

Hover: show text over image in center

Is this right?

Can you add some text? We can check easier

Correct! How and where do I add text?

23 hours ago, anderslonnfeldt said:

Correct! How and where do I add text?

Edit your page >> Hover on gallery >> Click Image icon >> Enter Description

Next hover on Gallery >> Click on Pencil icon >> Toggle on "Enable Caption"

Done.

Now the captions appeared under the images.

On 4/6/2022 at 11:33 PM, anderslonnfeldt said:

Done.

 

Now the captions appeared under the images.

Yes. You need to do it first, then I can check code to move text over image + make hover effect

I already did. But the text is black, that is why it can't be seen onto the black background.

10 hours ago, anderslonnfeldt said:

I already did. But the text is black, that is why it can't be seen onto the black background.

Try adding to Design > Custom CSS

figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

This is great!

Is it possible to make the font smaller on mobile?

On 4/11/2022 at 3:42 PM, anderslonnfeldt said:

This is great!

Is it possible to make the font smaller on mobile?

Add this CSS under

@media screen and (max-width:767px) {
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
	font-size: 12px !important;
}
}

It looks great. Thanks a lot. I really appreciate this 🙂

Have a great weekend.