NFT-preview-card-component built with media query and flex-box

Hi Ismail👋.You did great on this project, I think you have forgotten to add hover effect on the image.to do this, you need to add this👇 to your code..

{
<div class="img__container">
<img
class="diamond__img"
src="images/image-equilibrium.jpg"
alt="diamond"
/>
<div class="middle">
<img class="icon" src="images/icon-view.svg" alt="view icon" />
</div>
</div>
}

and this is for your Css👇

{
.img__container:hover .middle {
opacity: 1;
cursor: pointer;
}

.middle {
transition: 0.5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
background-color: hsla(178, 100%, 50%, 0.3);
border-radius: 0.5rem;
}

}

• also you need to add width and height to the middle class that is exactly the same as the image size.

I hope you find it useful..

@yosrajalali, Thanks for your feedback, if there is any way you need someone to reach out to do not hesitate to reach me thanks for your review once again.