NFT Preview Card

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi there! 👋

  Regarding the overlay, here are some changes that I made on my devtool.

  .overlay:hover {
      /* opacity: 0.4; */
      opacity: 1;
  }
  
  .overlay {
      position: relative;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      /* background-color: var(--cyan); */
      background-color: hsla(178, 100%, 50%, 0.5);
      transform: translate(0, -100%);
      border-radius: 0.5em;
  }
  

  So, I used hsla() to control the opacity of the color itself. This way, the eye icon can have full opacity. 😉

  Anyway, there are some areas that you can improve and fix.

  • Currently, the card is so narrow at 376px width until 1400px. It is because the card width is set with vw unit. Also, on mobile landscape view the card almost has no height. So, I recommend only setting a max-width on the card element with rem unit. The card only needs a max-width to prevent it from becoming too large on wide screen sizes. For the height of it, remove the height property and let the element inside the card controls it.
  • All the elements that have interactivity need to be wrapped by interactive elements like anchor tag.
  • All the icons are decorative images. So, I recommend leaving the alt="" empty.
  • For the avatar, it is a pretty important image. So, I suggest using the author's name as the alternative text of the image.
  • I don't think defer can be used on link tag (?).

  That's it! Hope this helps. 😊

  1

  ---

  

  Mario Lisbona•150

  @MarioLisbonaPosted over 2 years ago

  @vanzasetia Hey Vanza. Thanks so much for this! That is such an elegant solution, i had thought to use hsla(). It was the first time id encountered need to put an overlay over an image.

  I also changed the card width to rem units and max-width. This seemed to work however as soon as i removed the height, it also removed the overlay colour and changed the position of the eye image. So i had to leave the height in.

      /* I tried to remove the height and let the elements inside the card dictate its height
      This worked but it remove the hover overlay and moved the position of the image */
      max-width: 18rem;
      height: 30rem;```
  

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @MarioLisbona You're welcome! 👍

  I took a look at the updated solution. I notice the card is having some problems.

  • First, I still recommend removing the height and the flex properties. Use margin or padding to create white space between the elements instead of using justify-content.
  • So, add margin or padding to each element inside the card (e.g. h1, etc).
  • The overlay should be set to position: absolute. Then set the hero-image-container to position: relative instead. This way, the overlay would always be inside the parent element.

  For the card image, I recommend:

  • Wrap the image with a tag. It has interactivity so it needs to be wrapped by an interactive element.
  • The :hover effect should be on the a tag instead of the .overlay element.
  • Make the card overlay with 100% pure CSS. Use pseudo-elements and background properties instead. Make the cyan color as background-color and the eye icon as background-image. Then, you can put the eye icon in the center by using background-position property.

  Also, I notice two complex media queries where they have multiple conditions. I am not sure why you need those media queries. But, I would recommend keeping the media queries as simple as possible.

  0