Need help creating hover overlay
Does anyone have any idea how I can get that eye in the middle of my image? I've been trying to figure it out, but I just don't know how to approach it. I don't even know where to start but I do know that I need the pseudo class :after.
17 Replies
What did you try so far? Do you have a code snippet you can share in a codepen or jsfiddle?
I haven't dabbled into the css I just tried planting the html. I knew I had no idea how it worked so I just decided to ask for help
I can share a github repo gimme a sec
GitHub
GitHub - incogsnito/nft-preview-card-component
Contribute to incogsnito/nft-preview-card-component development by creating an account on GitHub.
Here you go
Everything including the design statuses is included. You can also point out any errors you find in my code as well.
hello from reddit
Thank you so much! I'm trying to figure out exactly how you did it right now. I'll apply your solution once I figure out how it works.
I updated with notes, feel free to ask questions
alright, so I tried to apply your solution but quickly ran into a problem. The icon is taking up the whole page instead of staying inside of the image.
Did you add position relative to the card?
I put an absolute position on that section
I've past that error now though.
My new problem is with making it coorparate with the other image
alright so the problem is definitely with the positioning
when I set it to absolute it takes up the whole page
When I set it to relative it does this
When you use position: absolute you need to add position: relative to the element you want the absolute to be relative to
So add position: relative to the image container, and then add position absolute to the image container pseudo element. You'll need to retrofit the codepen i have slightly to your markup
oh my god!
Thank you so much
everythings working now
I'll make sure to bookmark your solution. You don't know how much time you just saved me.
Great, glad it works! There's a lot of different ways to do this too so I'd experiment in the future next time you need to do something like this, if you want a challenge
Already on it.