CODEWITHSUNDEEP
javascripthtmlcssreactjssemantic-ui
Leo Messi
Leo Messi

Reputation: 6186

Add text over Image from Semantic UI

I'm using Semantic UI to show some images. It works fine, also to add text near the image but I want to put the text over the image. On the bottom half of the image if possible.

This is my code with text above the image:

import { Grid, Image } from 'semantic-ui-react';
      
{data.map((element) => (
  <Grid.Column>
    <>
      <div>{element.name + ' ' + element.city}</div>
      <Image
        src={element.image}
      />
    </>
  </Grid.Column>
))}

Is there a way to put the text from the div over the image?

Upvotes: 1

Views: 1360

Answers (1)

Stevetro
Stevetro

Reputation: 1963

You can set the position the div absolute in dependence to the parent

  <Grid.Column style={{ position: "relative", display: "flex"}}>
    <div style={{position: "absolute",bottom: 20}}>
      Name : City
    </div>
    <Image src={element.image} />
  </Grid.Column>

Upvotes: 2

Related Questions