NFT Card: Flexbox mastery and hover trickeries!

Hey all,

I have really enjoyed this challenge, it's my favorite one so far! I feel that I've finally got to understand how Flexbox works, thanks to the suggestions kindly provided by @zsoltvarju in my previous challenge.

• Question:

I've managed to make the image overlay in CSS, but it was quite challenging! I would appreciate feedbacks and technical advice.

The code related to the overlay in index.html is in class="pictures" div. In CSS please review the following lines:

/* nft and overlay images container */
.pictures {
position: relative;
}

/* nft image */
.parent-img {
display: block;
width: 100%;
height: 300px;
margin-top: 20px;
border-radius: 10px;
position: relative;
}

/* overlay container */
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 15px;
width: 100%;
overflow: hidden;
}

.overlay img {
opacity: 0;
}

/* hover over nft card image */
.pictures:hover img{
opacity: 1;
transition: 0.3s ease-in-out;
}

.overlay:hover {
cursor: pointer;
background-color: hsla(178, 100%, 50%, 0.6);
}