How do I hide a <div> until mouse hovers it? I want to project a background that only appears while hovering a box.

Answer 1

Hiya,

I would suggest using the opacity property, for example setting the opacity of an object to 0 would make it invisible, changing this to a 1 on hover would allow the background image to fade into view when hovered. See example below:

div {

opacity:0;

}

div:hover {

opacity:1;

}

This same effect can also be achieved using the visibility:hidden property, but animations require a bit more configuration.

👨🏼‍💻 Cheers!