[Image] Add text overlays

[elfassy]

is it possible to do this?

Where the text shows up above the image. Thanks

[kenhkelly]

Have you found a way to do this @elfassy? Looking for the same thing.

[elfassy]

@kenhkelly yes using regular css. Either negative margin or absolute positioning should work with image as background.

[kenhkelly]

I figured as much. Would be nice to have that added to the .ui.image element for simplicity.

[vinayraghu]

👍 A pretty common pattern so would be nice to have this coded in by default.

[exogenesys]

@elfassy Could please tell us more about how you did it? Any idea how you could accomplish the same with the React Semantic UI 'Image' Component?

[paschalidi]

+1 please

[Tsourdox]

The "css way" would look something like this:

<div className="ui fluid image">
    <img src={url}/>
    <div style={{position: 'absolute', bottom: 0, width: '100%', height: 'auto'}}>TEST</div>
</div>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[mcclowes]

+1

[ronnaf]

I am having the same problem :(

[CloudMunk]

Why has this not been addressed yet? This is such a common thing to have in a UI library... Has anyone found an easy and sound workaround on this issue yet? The CSS way wont cut it for what I am doing currently.

[elfassy]

Why has this not been addressed yet?

Feel free to open a PR.

[kenhkelly]

Created a PR to add caption support: #6621