All comments

Kim Ryan Formentera•40

@MikSantySubmitted 12 months ago

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

Responsive NFT Preview Component easily done with Flexbox

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;
}