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>