NTF Preview Card using HTML and CSS

Community feedback

• 

  João Vitor•640

  @jvssvjPosted 15 days ago

  Hello friend, congratulations on completing the challenge 👏. For you to do the hover effect, it's simple, first let's configure your html, in the image section it will look like this: :

      <div class="card__background">
        <img class="card__cube" src="images/image-equilibrium.jpg" alt="Cube image">
  
        <img class="card__view__icon" src="images/icon-view.svg" alt="View icon">
      </div>
  

  then the css:

  .card__background {
      width: 100%;
      height: 100%;
      max-width: 304px;
      max-height: 304px;
      position: relative;
      cursor: pointer;
      overflow: hidden;
      border-radius: .5rem;
      background-color: hsla(178, 100%, 50%, 0.527);
      object-fit: cover;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .card__cube {
      width: 100%;
      height: 100%;
      transition: .5s ease;
      z-index: 1;
  }
  
  .card__cube:hover {
      opacity: .3;
  }
  
  .card__view__icon {
      position: absolute;
  }
  

  For you to align the components, look for flexbox, there are many tutorials on the internet, I guarantee you will be able to learn. This way you will achieve the expected effect. If you have any questions, feel free to ask me, good luck 🚀

  Marked as helpful

  1