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?
8 Replies
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
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
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.
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
Check out the Frontend Mentor Discord channel. This is commonly asked/answered on there:
https://discord.com/channels/824970620529279006/1123196742465232937/1123196742465232937
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
Thank you very much.
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