Search code examples
javascripthtmlcssreactjssemantic-ui

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?

Solution

  • 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>