NFT preview card component | CSS Flexbox

Hi Mr. Jacko, I hope this is helpful for you. I recommend that you append <div class="overlay"> and make the overlay class absolutely positioned to your card-hero container.

• Make the position relative as so .card-hero { position: relative; }

• Add transition and set width and height to 100% and set opacity to 0 as so

.overlay { pisition: absolute; transition: .4s; width: 100% ; height: 100%; opacity: 0 }.

• Set the hover effect like .card-hero:hover .overlay { opacity: 1; }

Hi Jacko! What you are trying to do with the hover effect it can be easily done with transition: all 500ms ease-in-out; and to set the opacity from 0 to 1 when hovering. Don't forget to use the "all" property that's what makes the smooth transition when you are not putting your mouse over the image, I hope this can help you!