NFT card with grid and flexbox

Hi, I've been reading your code and it's very clean, I'm sure you'll do well in the future when you use tools like scss. In these cases I like to use ::before and ::after, to do so you have to wrap your img.card-image in a div, because these pseudo-elements don't work in imgs. Here is an example where I use ::before to create an element that is the same size as the image, has two backgrounds, and uses ::hover to make it visible.

.card-image-wrapper {
	cursor: pointer;
	position: relative;
	border-radius: 1rem; /* with this we don't have to specify */
	overflow: hidden; /* the border radius on each element.*/
}

.card-image-wrapper::before {
	content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease-in;
	background: url(./images/icon-view.svg) no-repeat center, rgba(0,255,255, 0.5);
	opacity: 0;
}

.card-image-wrapper:hover::before {
	opacity: 1;
}

.card-image {
	width: 100%;
	display: block; /* When an image is inside a div,
	the div use an extra empty space at the bottom,
	this solves it */
}

Hi Eero, I took some time to look at your solution and you did a great job!

You can add the effect :hover creating a div that appears on hover. I used tailwind but you can still see and understand which css properties you can use to do the same. Look here -> my solution

After try to add a little transition on the element with hover effect

Overall you did well :)

Hope this help and happy coding!

Hey @eerolli, You are learning fast.