Custom Button for Slide

[Isaacmeedinaa]

I want to add a custom button in the slide being rendered. This is what I am doing:

renderSliderImages = () => {
    return this.state.photos.map((photo) => (
      <div key={photo.id} data-src={photo.url}>
        <button>Custom Button</button>
      </div>
    ));
};

render() {
    return (
      <div className="card-form-gallery-slider-container">
        <AwesomeSlider bullets={false}>
          {this.renderSliderImages()}
        </AwesomeSlider>
      </div>
    );
}

The images are being rendered, but the button is below the div. How can I put it on top of the image?

[Isaacmeedinaa]

I got it to work! Here is my code for anyone who needs help!

renderSliderImages = () => {
    return this.state.photos.map((photo) => (
      <div
        key={photo.id}
        style={{
          backgroundImage: `url('${photo.url}')`,
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover",
        }}
      >
        <button onClick={() => console.log(photo.id)}>hi</button>
      </div>
    ));
};

render() {
    console.log(this.props.photos);
    return (
      <div className="card-form-gallery-slider-container">
        <AwesomeSlider bullets={false}>
          {this.renderSliderImages()}
        </AwesomeSlider>
      </div>
    );
}