Text caption

Hi,

To make the text for each image always visible and not just on hover, you can use the following CSS:

.twentytwenty-before-label,
.twentytwenty-after-label {
    opacity: 1;
}

This CSS will ensure that the labels are fully visible at all times.

Unfortunately, the feature to overlay the image with data from another shortcode (like product price) is not available at this time.

Hello.

Thank you. Your code works great.

Is there a way to modify background color for text on shortcode ?

Also would be great to make 1 background for 1 text (1image) , another for 2. Is it possible ?

You can use the same CSS class for the background, font color, font size, etc.

For the “Before” Image:

.twentytwenty-before-label {
    background-color: #336699;
    color: #fff;
}

For the “After” Image:

.twentytwenty-after-label {
    background-color: #ffcc04;
    color: #000;
}

Great??Thank you.