Currently, I am utilizing Semantic UI to display images. While it is functioning well for me in terms of adding text near the image, I desire to have the text positioned on top of the image. Ideally, I would like it to be located on the lower half of the image.
Here is my existing code where the text appears 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>
))}
I am wondering if there is a technique or method that allows me to overlay the text from the div directly onto the image itself?