NFT Preview Card Component - Using CSS Flexbox

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Ghaffar,

  To show the icon with the image when hovering on the image, you want to have a container for your image first that contains your image and also an overlay <div> like this, and within the overlay, you'll have your icon:

  <div class="card__image">
     <img src="./images/image-equilibrium.jpg" alt="Equilibrium, a multicolor cube" />
     <div class="overlay">
        <img src="./images/icon-view.svg" alt="" class="">
     </div>
  </div>
  

  The overlay needs a position:absolute (which means the parent container also will need position:relative added). The CSS for the overlay can look something like this:

  .card__image {
    position: relative;
  }
  
  .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: hsla(178deg, 100%, 50%, 0.5);
    opacity: 0;
    display: grid;
    place-content: center;
    transition: opacity 200ms ease-in-out;
  }
  .overlay img {
    width: 3rem;
    height: 2rem;
  }
  .overlay:hover {
    opacity: 1;
  }
  

  My solution is here if you want to check it out. Good luck!

  1
• 

  Aman Dagne•120

  @AmandagnePosted over 2 years ago

  Great work. Can you explain your question?

  0