Semantic-ui: [Image] Add text overlays

Created on 11 Dec 2015 · 14Comments · Source: Semantic-Org/Semantic-UI

is it possible to do this?

Where the text shows up above the image. Thanks

Enhancement

Source

elfassy

👍25

Most helpful comment

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

vinayraghu on 26 Apr 2016

👍12

All 14 comments

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

kenhkelly on 17 Jan 2016

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

elfassy on 18 Jan 2016

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

kenhkelly on 30 Jan 2016

👍2

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

vinayraghu on 26 Apr 2016

👍12

@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?

exogenesys on 2 Jun 2017

👍3

+1 please

paschalidi on 6 Jul 2017

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>

Tsourdox on 4 Oct 2017

👍11

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.

stale[bot] on 23 Feb 2018

mcclowes on 23 Feb 2018

I am having the same problem :(

ronnaf on 22 Mar 2018

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.