@visualdenniss
Posted
Hey there,
nice work. To answer your questions: In fact, this challenge is expected to be solved by only HTML and CSS (see the tags in challenge page as well), so it does not require any JS at all. To make the overlay appear, all you need is position absolute/position relative in combination with hover changes. Here is an example from my own solution just to give you an idea:
.nftCard-img-container { position: relative; }
.nftCard-view-icon-container { position: absolute; top: 0; left: 0; height: calc(100% - 5px); width: 100%; display: flex; justify-content: center; align-items: center; background-color: hsla(178, 100%, 50%, 0.29); border-radius: 15px; opacity: 0; transition: all 0.4s ease-in-out; cursor: pointer; }
.nftCard-img-container:hover .nftCard-view-icon-container { opacity: 1; }
Hope you find this feedback helpful!
Marked as helpful
@ZascuOfficial
Posted
@visualdenniss Oh my goodness me!
You're totally right! I could have used the opacity trick now that I think about it. This is really helpful, thank you so much! I am changing it right away.
Again, I appreciate it!
@visualdenniss
Posted
@ZascuOfficial Glad to hear it helped! Good luck on the next challenges!
