Responsive NFT Preview Component easily done with Flexbox

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

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.