Responsive Design For NFT Card Component (HTML & CSS) Using FlexBox

Hey Hanzala,

Similarly to a previous comment. Here is some of my CSS for this challenge:

• Setting the parent element to position relative:

.card-top {
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}


.card-top img {
    width: 100%;
    display: block;
}

• And then the overlay image to take up the entire space of it's parent element while hiding it:

.img-overlay {
    position: absolute;
    left: 0; 
    top: 0; 
    height: 100%;
    width: 100%;
    background-color: hsla(178, 100%, 50%, 0.3);
    display: none;
}

.img-overlay img {
    position: absolute;
    width: 50px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

• And then to show it upon hovering:

.card-top:hover .img-overlay {
    display: block;
}

Hopefully this helps. Keep it up! 😁

Hey Hanzala! 🙋‍♂️

Congratulations on completing the NFT preview card component challenge

I also got the same problem while working on this challenge. But I did manage to solve it

So here is a tip

index.html

• You can add one blank <div> element and add the <img> element with src = icon-view.svg after <img class="equilib-img" src="./images/image-equilibrium.jpg" height="250px" width="260px" alt="Equilibrium.io"> "from your code"

index.css

• Then make position absolute of both blank <div> element and <img> element with src = icon-view.svg and make display none for both the elements

• Give height and width to blank <div> element and then give the background color as per requirement.

• Then update your hover effect from .equilib-img:hover{cursor: pointer; background-color: hsl(178,100%,50%);} to .equilib-img:hover .blank-div{ display: block;} and .equilib-img:hover .img-view { display: block}

You can take a look at my {NFT preview card component} solution

I hope you find it useful! May your front-end journey be filled with successful 😊😊

good jop my bro Congrats on completing your first challenge!🎊🍻 you can do it by background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)); If you have any questions or need further clarification, feel free to reach out to me. Happy Coding! 🎆🎊