Mauricio Ludueña
Preguntastudent•hace 5 años
HELP! La imagen me tapa todo , los detalles y los botones !!
<style media="screen"> b { margin: 10px; } .carrousel{ width: 1oo%; overflow: scroll; padding: 30px; position: relative; overflow-x: hidden; } .carrousel__container{ white-space: nowrap; margin: 70px 0px; padding-bottom: 10px; } .carrousel__container:hover .carrousel-item { opacity: 0.3; } .carrousel__container:hover .carrousel-item:hover { transform: scale(1.2); opacity: 1; } .carrousel-item { background-color: pink; width: 200px; height: 250px; border-radius: 20px; overflow: hidden; margin-right: 10px; display: inline-block; cursor: pointer; transition: 450ms all; transform-origin: center left; position: relative; } .carrousel-item:hover ~ .carrousel-item { transform: translate3d(100px, 0,0); } .carrousel-item__img { width: 200px; heigh: 250px; object-fit: cover; } .carrousel-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.5; transition: 450ms opacity; padding: 10px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; flex-direction: colum; } .carrousel-item__details img { height: 25px; width: 25px; } .carrousel-item__details p { margin: 0px; color: red; font-weight: bold; } .carrousel-item__details:hover { opacity: 1; color: white; } </style> <body> <section class="carrousel"> <div class="carrousel__container"> <div class="carrousel-item"> <img class="carrousel-item__img" src="dollar_bill.jpg" alt=""> <div class="carrousel-item__details"> <div> <img src="plus-icon.png" alt="plus"> <img src="play-icon.png" alt="play"> </div> <p class="carrousel-item__details--title">Titulo descriptivo</p> <p class="carrousel-item__details--subtitle">2019 16+ 114min</p> </div> </div> <div class="carrousel-item"> <img class="carrousel-item__img capa0" src="dollar_bill.jpg" alt=""> <div class="carrousel-item__details capa1"> <div> <img src="./plus-icon.png" alt="plus"> <img src="./play-icon.png" alt="play"> </div> <p class="carrousel-item__details--title">Titulo descriptivo</p> <p class="carrousel-item__details--subtitle">2019 16+ 114min</p> </div> </div> </section> </body> </html>```
Mauricio Ludueña
student•hace 5 años
La imagen es la misma porque estoy usando la misma. Cuando hago hover funciona bien, es decir se agranda, y el resto se oscurece, pero no se ven los botones en ningun momento. Se te ocurre que puede ser ?
John Cardenas
student•hace 5 años
Hola, Mauricio. ¿Puedes agregar una captura de pantalla sobre tu problema? ¿la imagen se repite varias veces o es por el ancho y el alto?
