0

Estoy tratando de hacer un pequeño carrusel de imágenes en donde selecciones una imagen del carrusel y en esta aparezca el titulo de la imagen y su descripción, entre otras cosas; pero no he podido poner el código correcto en CSS para que cuando pongas el cursor en la imagen del carrusel la opacidad de .carrusel__contenedor--items__detalles cambie a 1 y se vea...

¿esto se puede hacer con solo CSS?

Mi código es el siguiente:

.carrusel{
    width: 100%;
    overflow: scroll;
    padding: 30px;
    position: relative;
}
.carrusel__contenedor{
    white-space: nowrap;
    margin: 70px 0px;
    padding-bottom: 10px;
}
.carrusel__contenedor--items{
    background-color: rgb(243, 10, 10);
    width: 200px;
    height: 250px;
    border-radius: 20px;
    margin-right: 10px;
    display: inline-block;
    cursor: pointer;
    transition: 450ms all;
    transform-origin: center left;
}
.carrusel__contenedor--items:hover ~ .carrusel__contenedor--items{
    transform: translate3d(100px,0,0);
}
.carrusel__contenedor:hover .carrusel__contenedor--items{
    opacity: 0.3;
}
.carrusel__contenedor:hover .carrusel__contenedor--items:hover{
    transform: scale(1.5);
    opacity: 1;
}
.carrusel__contenedor--items__img{
    width: 200px;
    height: 250px;    
    object-fit: cover;
}

.carrusel__contenedor--items__detalles{
    background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 100%);
    font-size: 10px;
    opacity: 0;
    transition: 450ms opacity;
}
<section class="carrusel">
    <div class="carrusel__contenedor">
        <div class="carrusel__contenedor--items">
            <img class="carrusel__contenedor--items__img" src="./imagenes/gente 1.jpg" alt="gente">
            <div class="carrusel__contenedor--items__detalles">
                <div>
                    <img src="./imagenes/icons8-play-64.png" alt="play">
                    <img src="./imagenes/icons8-plus-64.png" alt="plus">
                </div>
                <p class="carrusel__contenedor--items__detalles--titulo">Titulo desciptivo</p>
                <p class="carrusel__contenedor--items__detalles--descripcion">2019 16+ 140 minutos</p>
            </div>
        </div>
        <div class="carrusel__contenedor--items"></div>
        <div class="carrusel__contenedor--items"></div>
    </div>
</section>

1 respuesta 1

1

Lo único que necesitas es buscar en tu css es que tu elemento carrusel__contenedor--items__img, tenga un hover, y afectar con el selector css de hermanos +, el elemento al que vas a afectar que en este caso corresponde a carrusel__contenedor--items__detalles.

.carrusel{
    width: 100%;
    overflow: scroll;
    padding: 30px;
    position: relative;
}
.carrusel__contenedor{
    white-space: nowrap;
    margin: 70px 0px;
    padding-bottom: 10px;
}
.carrusel__contenedor--items{
    background-color: rgb(243, 10, 10);
    width: 200px;
    height: 250px;
    border-radius: 20px;
    margin-right: 10px;
    display: inline-block;
    cursor: pointer;
    transition: 450ms all;
    transform-origin: center left;
}
.carrusel__contenedor--items:hover ~ .carrusel__contenedor--items{
    transform: translate3d(100px,0,0);
}
.carrusel__contenedor:hover .carrusel__contenedor--items{
    opacity: 0.3;
}
.carrusel__contenedor:hover .carrusel__contenedor--items:hover{
    transform: scale(1.5);
    opacity: 1;
}
.carrusel__contenedor--items__img{
    width: 200px;
    height: 250px;    
    object-fit: cover;
}

.carrusel__contenedor--items__detalles{
    background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 100%);
    font-size: 10px;
    opacity: 0;
    transition: 450ms opacity;
}
.carrusel__contenedor--items__img:hover + .carrusel__contenedor--items__detalles {
    opacity: 1;
    }
<section class="carrusel">
    <div class="carrusel__contenedor">
        <div class="carrusel__contenedor--items">
            <img class="carrusel__contenedor--items__img" src="https://picsum.photos/200/300" alt="gente">
            <div class="carrusel__contenedor--items__detalles">
                <div>
                    <img src="./imagenes/icons8-play-64.png" alt="play">
                    <img src="./imagenes/icons8-plus-64.png" alt="plus">
                </div>
                <p class="carrusel__contenedor--items__detalles--titulo">Titulo desciptivo</p>
                <p class="carrusel__contenedor--items__detalles--descripcion">2019 16+ 140 minutos</p>
            </div>
        </div>
        <div class="carrusel__contenedor--items"></div>
        <div class="carrusel__contenedor--items"></div>
    </div>
</section>

3
  • Yo habia probado con esa misma linea que me comentas pero no le habia puesto el signo + que diferencia hay si no se pone?
    – Yept
    Commented el 4 may. 2021 a las 17:49
  • en ese caso tendrias que tener el .carrusel__contenedor--items__detalles, dentro de tu image, por que eso es lo que le indicas en el selector Commented el 4 may. 2021 a las 18:01
  • muchisimas gracias, todo muy claro... muy agradecido
    – Yept
    Commented el 4 may. 2021 a las 18:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.