I am trying to make a small carousel of images where you select an image from the carousel and in it the title of the image and its description appear, among other things; but I haven't been able to put the correct code in CSS so that when you hover over the carousel image the opacity .carrusel__contenedor--items__detalles
changes to 1
and it looks...
can this be done with just css?
My code is the following:
.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>