How to add CSS for Slider

Question

While using react-slick npm for a slider I tried a lot to add an image over an image but couldn't. My code below:

code:-

import React, { Component } from "react";
import Slider from "react-slick";
import {
  Card,
  CardBody,
} from 'reactstrap';
import image from '../images/avengers__age_of_ultron_characters-fcover.jpg'
import image1 from '../images/city-facebook-cover-18.jpg'
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
import "../css/slider.css"

export default class Sliders extends Component {
  render() {
    const settings = {
      className: "center",
      centerMode: true,
      infinite: true,
      centerPadding: "24%",
      slidesToShow: 1,
      speed: 3000,
      width:"851px",
      infinite: true,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 3000,
    };
    return (
      <div className="slider-main-section">
        <Slider {...settings}>
          <div className="slider-inside">
          <Card style={{ borderRadius: '25px'}}>       
          <img src={image}/>
            <text className="gallery-cell-title">200</text>
          </Card>
          </div>
          <div className="slider-inside">
          <Card style={{ borderRadius: '25px'}}>
          <img src={image1}/>
          <div class="gallery-cell-title">
          <span>image2000</span>
          </div>
          </Card>
          </div>
        </Slider>
      </div>
    );
  }
}

css:-

.slider-main-section{
    padding-top: 15px;
    background-color: white;;
    padding-bottom: 10px;
}
.slider-inside{
    position:relative;
    padding-left: 12px;
    padding-right: 12px;
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

img {
    border-radius: 25px;
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.gallery-cell-title {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: black;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
}

i have tried a lot to implement this structure but i couldnt, and every time i am getting the text below the image . the structure which i need is given below: -

This is the structure i need

Thanks in advance

Answer 1

got it... code : -

  <div >
      <img src={image2} className="test1"/>
        <img src={image1} className="test2"></img>
         </div>

css:-

.test1{
    position: relative;
}
.test2{
    position: absolute; width:-100%; top: 0px; left: 0px;
}