Responsive nft card challenge

Community feedback

• 

  P

  Jeff Baldwin•30

  @jbaldwin406Posted over 1 year ago

  I struggled with the hover effect too at first. One solution I found is to make an extra 'overlay' div and set it hidden (in my case set the opacity to 0) and then when the image is hovered over, flip that opacity to visible. There are probably some other ways of doing it, but this is what worked for me.

  Example: Here is the html for the overlay.

  <div class="overlay">
        <a href="#">
                <img
                  class="hover-view"
                  src="./images/icon-view.svg"
                  alt="view icon"
                />
        </a>
  </div>
  

  Then in the css set opacity: 0; Also note: There may be another way to do this, but in order to get the view icon to not have the opacity effect applied to it, I instead set the background color of the overlay div to rgba in order to give just the background the opacity and not the icon on top of it.

  Then on hover of the image:

  .card-image:hover .overlay{
      opacity: 1;
      cursor: pointer;
  }
  

  This will show the hover effect you are after!

  Cheers and I hope this wasn't just terrible rambling! Nice job and keep up the good work!

  1
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  The post above posted by @jbaldwin406 answers your question regarding the overlay effect on hover very clearly. In addition to that i would like to point out that you can use max-width on the img, e.g.

  img {max-width: 285px;} to avoid getting img too large when resized.

  Hope this helps and keep up the good work!

  0