Laura Bazaldua Monroy
PreguntaHola compañeros, pueden ayudarme en esta parte? no muestra la imagen ni el texto descriptivo
El HTML
<section class="carrusel"> <div class="carrusel__container"> <div class="carrusel-item"> <img class="carrusel-item__img" src="https://images.pexels.com/photos/7825917/pexels-photo-7825917.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Girl"> <div class="carrusel-item__details"> <div> <img class="carrusel-item__details--img" src="Imagenes/boton-de-play.png" alt=""> <img class="carrusel-item__details--img" src="Imagenes/mas.png" alt=""> </div> <p class="carrusel-item__details--Titulo">Título descriptivo</p> <p class="carrusel-item__details--sutitulo">2021 16+ 114min</p> </div> </div> <div class="carrusel-item"> <img class="carrusel-item__img" src="https://images.pexels.com/photos/7825917/pexels-photo-7825917.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Girl"> <div class="carrusel-item__details"> <div> <img src="Imagenes/boton-de-play.png" alt=""> <img src="Imagenes/mas.png" alt=""> </div> </div> <p class="carrusel-item__details--Titulo">Título descriptivo</p> <p class="carrusel-item__details--sutitulo">2021 16+ 114min</p> </div> </div> </section>
El CSS
} .carrusel{ width: 100%; overflow: scroll; padding-left: 30px; position: relative; } .carrusel__container{ white-space: nowrap; margin: 70px 0px; padding-bottom: 10px; transform: 450ms -webkit-transform; transition: 450ms transform; transition: 450ms transform, 450ms -webkit-transform; font-size: 0; white-space: nowrap; margin: 70px 0px; padding-bottom: 10px; } .carrusel-item{ width: 200px; height: 250px; border-radius: 20px; overflow: hidden; margin-right: 10px; font-size: 20px; cursor: pointer; display: inline-block; transition: 450ms all; -webkit-transform-origin: center left; transform-origin: center left; } .carrusel-item:hover ~ .carrusel-item{ -webkit-transform: translate3d(100px, 0, 0); transform: translate3d(100px, 0, 0); } .carrusel__container:hover .carrusel-item{ opacity: 0.3; } .carrusel__container:hover .carrusel-item:hover{ -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 1; } .carrusel-item__img{ width: 200px; height: 250px; -o-object-fit: cover; object-fit: cover; position: relative; } .carrusel-item__details{ background: linear-gradient(to top, rgba(0 0 0 0.9)0%, rgba(0 0 0 0)100%); font-size: 10px; opacity: 0; transition: 450ms opacity; padding: 10px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; } .carrusel-item__details--img { width: 20px; } .carrusel-item:hover .carousel-item__details { opacity: 1; } .carrusel-item__details--Titulo { color: white; margin: 5px 0px 0px 0px; } .carrusel-item__details--sutitulo { color: white; font-size: 8px; margin: 3px 0px; }
Laura Bazaldua Monroy
Holaaa, mucha gracias por sus comentarios, era un error en el CSS, gracias <3
Eber Stev Gonzalez Martinez
Deberias de corrobarar que en efecto tienes los archivos en la ruta que del src = " " te recomiendo que tus rutas las inicies con punto y diagonal ./ para ubicar de mejor manera tus archivos.
<img src="Imagenes/boton-de-play.png"alt=""> <img src="./Imagenes/boton-de-play.png"alt="">
Carlos Iván Ochoa Gómez
Talvez estas haciendo mal el link de los botones y es por eso que no aparecen, pon estos Botón play Botón agregar Copia la url y pegala dentro del src=" " y al div contendor de los botones agrégale esta clase carrusel-item__details--botones y desde el CSS dale estos estilos
.carrusel-item__details--botones img{ width: 30px; height: 30px; }
Laura Bazaldua Monroy
Hola, ya cambie los errores, pero siguen sin aparecer los iconos de mas y play. creo que es en la parte de CSS
Carlos Iván Ochoa Gómez
Hola Laura, Tenias 2 errores, 1 era un typo en el css
.carrusel-item:hover .carousel-item__details { opacity: 1; }
Llamaste la clase por .carousel-item__details pero tu esa clase la definiste por carrusel-item__details.
El otro era en el HTML, en el segundo contenedor dejaste las etiquetas p fuera del <div class ="carrusel-item__details"> deberían ir dentro.
<div class="carrusel-item"> <img class=" "alt="Girl"> <div class="carrusel-item__details"> <div> <img src="Imagenes/boton-de-play.png"alt=""> <img src="Imagenes/mas.png"alt=""> </div> </div> <p class="carrusel-item__details--Titulo">Título descriptivo</p> <p class="carrusel-item__details--sutitulo">2021 16+ 114min</p> </div>
Si tienes otra duda no dudes en preguntar, un saludo.
