All comments

• 

  Kim Ryan Formentera• 40

  @MikSanty

  Submitted 10 months ago

  Is there a better way to do the view icon hover than this way?

  

  Responsive NFT Preview Component easily done with Flexbox

  2

  10

  

  P

  Rogač Matej• 200

  @rogacmatej

  Posted 10 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