porque el segundo icono dentro de la tarjeta no aparece?, ademas no puedo modificar el tamaño de los iconos play… alguien sabe como repre...

Martín Matayoshi

Pregunta

student•hace 6 años

porque el segundo icono dentro de la tarjeta no aparece?, ademas no puedo modificar el tamaño de los iconos play… alguien sabe como represantarlo en el código? para agregarlo?

body {
    margin: 0px;
  }
  .carousel {
    width: 100%;
    overflow: scroll;
    padding: 30px;
    position: relative;
  }
  .carousel__container {
    white-space: nowrap;
    margin: 70px 0px;
    padding-bottom: 10px;
  }
  .carousel-item {
    background-color: palevioletred;
    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;
  }
  .carousel-item:hover ~ .carousel-item {
    transform: translate3d(100px, 0, 0);
  }
  .carousel__container:hover .carousel-item {
    opacity: 0.3;
  }
  .carousel__container:hover .carousel-item:hover {
    transform: scale(1.5);
    opacity: 1;
  }
  .carousel-item__img {
    weight: 200px;
    height: 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: 1;
    transition: 4500ms opacity;
    padding: 10px;
    position: absolute;
    top: 1;
    left: 0;
    right: 0;
    bottom: 0;
    color: white;
    font-family: 'Muli', sans-serif;
  }
</style>
<body>
  <section class="carousel">
    <div class="carousel__container">
      <div class="carousel-item">
        <img class="carousel-item__img" src="https://images.pexels.com/photos/96380/pexels-photo-96380.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Bajo">
        <div class="Carrousel-item__details">
          <div>
            <img src="https://img.icons8.com/flat_round/64/000000/play--v5.png" alt="play">
            <img src="https://img.icons8.com/flat_round/64/000000/fast-forward--v3.png" alt="Next">
          </div>
            <p class="Carrousel-item__details--title">Titulo descriptivo</p>
            <p class="Carrousel-item__details--subtitle">2019 16+ 114minutos</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="carousel-item__img" src="https://images.pexels.com/photos/1105666/pexels-photo-1105666.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Concierto">
        <div class="Carrousel-item__details">
          <div>
            <img src="https://img.icons8.com/flat_round/64/000000/play--v5.png" alt="play">
            <img src="https://img.icons8.com/flat_round/64/000000/fast-forward--v3.png" alt="Next">
          </div>
          <p class="Carrousel-item__details--title">Titulo descriptivo</p>
          <p class="Carrousel-item__details--subtitle">2019 16+ 114minutos</p>
      </div>
      </div>
    </div>
  </section>
</body>

porque el segundo icono dentro de la tarjeta no aparece?, ademas no puedo modificar el tamaño de los iconos play… alguien sabe como repre...

Curso de Frontend Developer

Curso de Frontend Developer