NFT card responsive and layout hover change

hey guys these is the best challenge to practice the overlay over an image using the relative and absolute positioning.what really i learned in these project is testing my ablity to position elements absolute by positioning the parent element relatively.

<div class="card-img"> <img src="./images/image-equilibrium.jpg" alt="" /> <div class="card-overlay"> <img src="./images/icon-view.svg" alt="Icon View" width="48" height="48" /> </div> </div> so when we hover over the card-img the hidden overlay image with background color will pop up by changing its opacity to 1. .card-overlay:hover { opacity: 1; transition: ease-out transform 0.8s; } To see how you can add code snippets, see below: the overlay is enabled to be transparent background-image: url(./images/icon-view.svg) no-repeat center; background-color: hsl( 178, 100%, 50%, 0.5 ); /0.5 is opacity of color to enable transparency/

and also the thin horizontal line is designed using horizontal row property /horizontal row line/ hr { border-bottom: 0; border-left: 0; border-right: 0; border-top: 1px solid; height: 10px; color: var(--color-line); margin-top: 1.5rem; }