Tengo un elemento Splideslide en reacción y estoy buscando mover el texto de descripción sobre la imagen para cada elemento. Actualmente el código que tengo es:
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 PopularEn teoría, creo que esto debería poder mover el texto en la imagen, pero por alguna razón no funciona como se esperaba. El proyecto completo se puede ver en el repositorio aquí: REPO . Siéntase libre de comentar para obtener más información o cualquier aclaración.
Tal vez por tus múltiples
postion: absolute;en vez de
position: absolute;;)