Feature request: Add text to image

[brgrp]

Hi,

I'd like to request the ability to add text overlays on top of images. This would allow users to provide context or explanations for what's shown in each image, making the slider more user-friendly and informative. Here are some possible use cases:

• Add a brief description of objects in the first image, such as "a cat sitting on a couch"
• Highlight specific details in the second image, such as "cat is replaced by a dog with AI"

I believe this feature would enhance the user experience and provide more context for users. Let me know if you're interested in implementing or if there are other features you think would be valuable. Thanks!

[sneas]

Hi, @brgrp,

I'm sorry for the delayed response.

I'm not sure I got your request correctly.

img-comparison-slider is quite flexible, and basically is limited by HTML, CSS and JS. For example you can use custom HTML instead of before/after images as I did in this example: https://img-comparison-slider.sneas.io/examples.html#before-and-after-labels

Also, I use the same approach to provide an elaborate example of the slider on the homepage: https://img-comparison-slider.sneas.io

You can find the code of the example from the homepage here https://github.com/sneas/img-comparison-slider/blob/master/packages/www/src/views/index.hbs#L5-L78 . The code is a bit complex because I wanted it to look decent on any device and any screen size. But, I hope it explains the idea - you can provide any HTML of any complexity before/after images + you can write your custom JS handlers if you need.

Does my answer help?

[brgrp]

Hey @sneas, that's exactly what I was looking for! I somehow missed that part - my fault. Thank you!