NFT Preview Card using flexbox

Community feedback

• 

  Dusan Brankov•860

  @dusan-bPosted about 2 years ago

  Hi VMH1225,

  To get the hover effect, you should wrap the image like this:

  <a class="overlay" href="#">
    <img class="mainImage" src="images/image-equilibrium.jpg" alt="Equilibrium">
  </a>
  

  And then add the following CSS rules:

  main {
    isolation: isolate;
  }
  
  .overlay:hover {
    background: linear-gradient(
      hsla(178, 100%, 50%, 0.5),
      hsla(178, 100%, 50%, 0.5)),
      url(images/icon-view.svg) center no-repeat;
    border-radius: 2%;
  }
  
  .mainImage {
    position: relative;
    z-index: -1;
    vertical-align: top;
  }
  

  If something is not clear, feel free to ask. Keep it up, and happy coding. :)

  Marked as helpful

  1