NFT preview card component with HTML and CSS only

Community feedback

• 

  Fer•3,970

  @fernandolapaz

  Posted about 2 years ago

  Hi, regarding your question:

  • I leave you another way to do it in case you want to take a look (similar to what you did so you will understand it easily):

  You can use the ::before pseudo-element to insert content (background and icon) to an element (the image).

  Using position and width/height to cover the image and grid to center the icon. Then opacity to hide/show.

  And we have a cleaner html with just the image.

  .card__img {
  position: relative;
  }
  
  .card__img::before {
  position: absolute;    
  content: url(images/icon-view.svg);    
  display: grid;
  place-content: center;
  background-color: hsla(178, 100%, 50%, 0.5);
  width: 100%;
  height: 100%;
  opacity: 0;
  }
  
  .card__img:hover::before {
  opacity: 1;
  }
  

  • And I take the opportunity for another comment if you don't mind:

  When there is a hover state over an element it means that it is interactive, so there must be an interactive element around it (like a link or a button). So, we should use a <a> or <button> to wrap the image (depending on what happened when clicking on it).

  I hope it’s useful 🙂

  Regards 👋

  12

  Marked as helpful