Отзывчивость карусели и анимация элементов

Question

Я пытаюсь построить карусель, используя другую библиотеку, но у меня все еще не получается сделать ее красивой.

Во-первых, я пытаюсь сделать красивую анимацию для самой карты, когда вы наводите на нее курсор

Левая сторона - это когда вы ее наводите, а правая - поведение по умолчанию. Я просто хочу получить вертикальный перевод снизу вверх, чтобы отобразить заголовок, des c и кнопку, и просто заголовок внизу, когда не наведен.

I tried to use this : https://codepen.io/Thunderboy/pen/LxjrgB, но я потерялся

У меня также возникает проблема с отзывчивостью при изменении размера окна. Я хочу, чтобы карусель и карточка выглядели одинаково. пространство между каждой картой остается неизменным без наложения.

введите описание изображения здесь

вот код, который я использую:

• Карусель:

import React  from 'react';
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import "../pages/Home.css";
import ClassCard from "./materialdesign/ClassCard";
import Salad from '../assets/images/fruit-salads.jpg';
import Dj from '../assets/images/dj.jpg';
import Photo from '../assets/images/photo.jpg';
import Skate from '../assets/images/skateboard.png';


class HomeCarousel extends React.Component {

    render() {
        const responsive = {
            desktop: {
              breakpoint: { max: 3000, min: 1024 },
              items: 4,
              slidesToSlide: 1 // optional, default to 1.
            },
            tablet: {
              breakpoint: { max: 1024, min: 600 },
              items: 3,
              slidesToSlide: 1 // optional, default to 1.
            },
            mobile: {
              breakpoint: { max: 600, min: 0 },
              items: 1,
              slidesToSlide: 1 // optional, default to 1.
            }
          };

          const title1="Authentic Mexican Cooking";
          const desc1='There’s “Mexican food” and then there’s food, from Mexico. Spend some time with Maria in her kitchen and learn about the cuisine, and the culture.';
  
          const title2="So, you wanna be a DJ?Start Here.";
  
          const title3="Hike and shoot DSLR nature photography";
  
          const title4="Customize your own deck";
  
          const title5="Next Cool stuff";
  
          const title6="Next Super Cool stuff";
          
        return (
            
              <Carousel className="home-carousel"
                swipeable={true}
                draggable={false}
                showDots={false}
                centerMode={false}
                responsive={responsive}
                ssr={false} // means to render carousel on server-side.
                infinite={true}
                autoPlay={this.props.deviceType !== "mobile" ? true : false}
                autoPlaySpeed={2000}
                keyBoardControl={true}
                customTransition="all .5"
                transitionDuration={500}
                containerClass="carousel-container"
                removeArrowOnDeviceType={["tablet", "mobile"]}
                renderDotsOutside={false}
                deviceType={this.props.deviceType}
                dotListClass="custom-dot-list-style"
                itemClass="carousel-item-padding-40-px"
              >
            <div> 
                <ClassCard title={title1} desc={desc1} pic={Salad}></ClassCard>
            </div>
            <div>
                <ClassCard title={title2} desc={desc1} pic={Dj}></ClassCard>
            </div>
            <div>
                <ClassCard title={title3} desc={desc1} pic={Photo}></ClassCard>
            </div>
            <div>
                <ClassCard title={title4} desc={desc1} pic={Skate}></ClassCard>
            </div>
            <div>
                <ClassCard title={title5} desc={desc1} pic={Salad}></ClassCard>
            </div>
            <div>
                <ClassCard title={title6} desc={desc1} pic={Dj}></ClassCard>
            </div>
              </Carousel>
        );
    }
}

export default HomeCarousel;

css только для карусели:

.home-carousel {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

И ClassCard

import React from 'react';
import BlueButton from '../materialdesign/BlueButton'
import TextContents from '../../assets/translations/TextContents';

class ClassCard extends React.Component {  

    render() {
        const tileStyle = {
            width: "240px",
            height: "360px",
            backgroundColor: "#666666",
            position: "relative",
            display: "inline-block",
            borderRadius: "20px",

        }

        const titleStyle = {
            width: "175px",
            position: "absolute",
            margin: "auto",
            textAlign: "center",
            top:"20%", bottom:0, left:0, right:0,
            fontFamily: "Fredoka One",
            fontSize: "18px", 
            fontWeight: "normal",
            lineHeight: 1.6,
            color: "#ffffff"  
        }

        const descStyle = {
            width: "175px",
            position: "absolute",
            margin: "auto",
            textAlign: "center",
            top:"40%", bottom:0, left:0, right:0,
            fontFamily: "Source Sans Pro",
            fontSize: "14px", 
            lineHeight: 1.6,
            color: "#ffffff" 
        }

        const btnStyle = {
            position: "absolute",
            margin: "auto",
            textAlign: "center",
            top:"80%", bottom:0, left:0, right:0,
        }


        return(
            <div style={tileStyle}>
                
                <img
                    src= { this.props.pic }
                    style= { tileStyle }
                    alt="Village"
                />

                <p style={titleStyle}>{this.props.title}</p>
                <p style={descStyle}>{this.props.desc}</p>
                <div style = {btnStyle}>
                <BlueButton textSize="18" link_href={`/classdetails?id=${this.props.id}`} text={TextContents.BookBtn} />
                </div>
            </div>
        );
    }
}

export default ClassCard;

Есть идеи, как сделать эту анимацию и исправить мою проблему с отзывчивостью?