NFT preview card component. CSS, Flex and Grind

To make the hover effect, first add the icon icon-view.svg to the HTML in the section with the hero class. Then replace in your CSS

.hero img {
    border-radius: 10px;
}

with:

.hero {
   background-color: var(--cyan);
   border-radius: 10px;
   overflow: hidden;
   position: relative;
}
.hero:hover img:first-child {
   opacity: 0.5;
   cursor: pointer;
}
.hero:hover img:last-child {
   display: block;
   cursor: pointer;
}

.hero img:first-child {
   display: block;
   width: 100%;
}
.hero img:last-child {
   position: absolute;
   display: none;
   top: calc(50% - 1.5rem);
   left: calc(50% - 1.5rem);
   width: 3rem;
   height: 3rem;
}

The background behind the image will be cyan and when hover occurs the image will become semi-transparent. You can rename img:first-child and img:last-child to your own class names for better readability.