How to make SVG appear on hover?

I want to make an SVG appear when hovering over that IMG along with the transparent background color as seen in the left image. How do I achieve that pls?
No description
No description
8 Replies
MarkBoots
MarkBoots•15mo ago
Lay a div (with opaque bg color) and the svg inside on top of that image. Give the div an opacity of 0 and change it on hover to 1
Riky
RikyOP•15mo ago
Pls if possible, can you show me what the code show look like? Idk what it means to lay a div on top of an img
b1mind
b1mind•15mo ago
pay them 😄 cash no eth jp but yea no one is going to do the work for you... show a demo of what you have and maybe someone will help guide your current code to working code.
Riky
RikyOP•15mo ago
I'm not expecting anyone to do the job for me, but I got a response like this from chatgtp and I don't think this is what I want, and I don't know how to reverse engineer it. I need to make background appear on hover, no disappear on click
No description
No description
No description
No description
savvystrider15
savvystrider15•15mo ago
Check out the Frontend Mentor Discord channel. This is commonly asked/answered on there: https://discord.com/channels/824970620529279006/1123196742465232937/1123196742465232937
MarkBoots
MarkBoots•15mo ago
here a small and quick example https://codepen.io/MarkBoots/pen/oNJJape. I used grid to lay the image and overlay on top of each other
Riky
RikyOP•15mo ago
Thank you very much.
No description
Riky
RikyOP•15mo ago
I just did copied and pasted your code and it works. But I'm going to try and find out more about the properties you used and what they do. I appreciate the comments too. Gives me some understanding of what's happening
Want results from more Discord servers?
Add your server