Responsive NFT Preview Component easily done with Flexbox

Community feedback

• 

  P

  Rogač Matej•200

  @rogacmatejPosted 12 months ago

  Hi,

  You could use pseudo-elements instead to display overlay.

  .image::after {
    content: ' ';
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.503;
    background: var(--tertiary-color);
  }
  
  .image .view-icon {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  
  .image:focus::after,
  .image:hover::after,
  .image:focus .view-icon,
  .image:hover .view-icon {
    display: block;
  }
  

  0
• 

  Vladimir Gatara•250

  @vgarmyPosted 12 months ago

  Hi

  No its looks good, but just maby add an transition in your

  .image > div { .... transition: all .4s ease-in-out; }

  So it doesn't pop up too quickly, and is a little more pleasant to look at.

  0