Responsive NFT preview card component

Otra forma de mostrar el estado de vista

.card__picture {
  margin-bottom: 22px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.card__picture::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: var(--cyan);
  opacity: 0;
}

.card__picture::after {
  content: url('./img/icon-view.svg');
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: grid;
  place-content: center;
  opacity: 0%;
}

.card__picture:hover::before {
  opacity: 60%;
  transition: all 0.5s;
}

.card__picture:hover::after {
  opacity: 100%;
  transition: all 0.5s;
}