@SatellitePeace
Posted
Hello @DavidMartelCloutier your NFT card looks great
-
now to answer your question
-
There is a CSS property called z-index.
-
z-index determines the overlapping contents that will appear first without affecting the position or visibility of other contents
-
If you have not tried the z-index you should try it
set the z-index of the icon to 3 then set the z-index of the image to either -1 or 1
like so
main__img:hover{
z-index: -1;
}
.icon__img:hover{
z-index:3;
}
````
I hope this helps
Marked as helpful
@DavidMartelCloutier
Posted
@SatellitePeace
Thanks, i try this
@Raja-Junaid
Posted
@DavidMartelCloutier Hi David. Congratulation on completing this challenge.
There is another way to add an eye image in your hover. So you can also add background-image: url(); and then add URL of an eye image.
.img:hover{ backgroun-image: url(); }
and then add url.
I hope this helps you
Marked as helpful
