I have a Splideslide element in react and am looking to move the description text over the image for each element. Currently the code I have is:

import {useEffect, useState} from "react";
import styled from "styled-components";
import {Splide, SplideSlide} from "@splidejs/react-splide";
import "@splidejs/splide/dist/css/splide.min.css";

function Popular() {
    const [popular, setPopular] = useState([]);


    useEffect(() => {
        getPopular();
    }, []);
    
    const getPopular = async() => {
      const api = await fetch(`https://api.spoonacular.com/recipes/random?apiKey=${process.env.REACT_APP_API_KEY}&number=9`);
      const data = await api.json();
      console.log(data);
      setPopular(data.recipes)
      console.log(data.recipes)
      
    }

    return (
      <div>
        <Wrapper>
          <h3>Popular Picks</h3>
          <Splide options = {{
            perPage:4,
            arrows: false,
            pagination: false,
            drag: 'free',
            gap: "4rem",
          }}>
            {popular.map((recipe) =>{
              return (
                <SplideSlide>
                  <Card>
                    <Gradient/>
                    <p>{recipe.title}</p>
                    <img src={recipe.image} alt={recipe.title}/>
                    
                  </Card>
                </SplideSlide> 
              );
            })}
          </Splide>
        </Wrapper>  
      </div>
    )
}

const Wrapper = styled.div`
  margin: 4rem 0rem;
  postion: absolute;
`;

const Card = styled.div`
  min-height: 25rem;
  overflow: hidden;
  postion: relative;
  img {
    border-radius: 2rem;
    postion: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  p {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: 0%;
    transform: translate(-50%, 0%);
    color: black;
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
`;

const Gradient = styled.div`
  z-index: 3
  postion: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5))
`;
export default Popular

Theoretically I believe this should be able to move the text on the image but for some reason it is not working as intended. The full project can be seen in the repository here: REPO. Feel free to comment for further information or any clarifications.

CodePudding user response：

Maybe because of your multiple

postion: absolute;

instead of

position: absolute;

;)