NFT preview card component using CSS Flexbox and :hover

What are you most proud of, and what would you do differently next time?

What I'm most proud of for this challenge is being able to apply CSS Flexbox as a solution to this challenge. I now have a better understanding how Flexbox works and that it should be used on container elements and will affect only the child elements directly inside that parent element. Any elements that are grandchildren will not be affected by Flexbox.

What I would do differently next time would be to design the HTML framework and CSS naming schema to be more efficient and understandable. Developing an effective HTML framework to design CSS rules around is a lot more important when I had to start creating container elements just to be able to position images on top of each other.

What challenges did you encounter, and how did you overcome them?

The main challenge I had with this project was applying the :hover effect over the NFT image and having both images and the background color stay inside the container.

I was able to overcome this by creating two div elements. The first div element to serve as a container for both images and a div container. I was able to use the position attribute to place both images and the div container classified as overlay to be inside the parent div classified as container.

Then I set the opacity of the overlay to 0 and the display attribute of the hover-img to none to make them invisible. Then using the :hover rule, I set the display of the hover-img to block to be visible and the opacity of the overlay to .5 to make the cyan color appear.

.container {
    position: relative;
    width: 100%;
    max-width: 320px;
}

.container:hover .hover-img {
    display: block; 
}

.hover-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .3s ease;
    background-color: hsla(178, 100%, 50%);
    border-radius: 1em;
}

.container:hover .overlay {
    opacity: .5;
  }

What specific areas of your project would you like help with?

If there is help I would like with this project it would be to have a better understanding of the position attributes and if there is a better solution to achieve the same effect of creating the overlay over the NFT image because surrounding an entire div element with an element does not seem like the best solution.