Change opacity of one div WITH transition on hover over another div

Question

I'm trying to change the opacity of a div slowly when hovering over another div.

I can change the opacity of the div when hovering over the other div but the problem is that I dont know how to do slowly with a transition.

My code looks like this:

 #my-id:hover ~ #info .hc { display: block; opacity: 1; } #info div { display: none; opacity: 0; } .test-border { border: 1px solid red; width: 100%; height: 100%; color: red; } 

 <div> <div id="my-id">Hover here</div> <div id="info"> <div class="hc test-border">Information</div> </div> </div> 

Answer 1

Add the transition property on the div that changes:

#info div {
    transition:opacity 1s ease;
    opacity: 0;
}

The problem here is you may need to remove the display:none since this property can't be animated by transition.

 #my-id:hover ~ #info .hc { opacity: 1; } #info div { opacity: 0; transition:opacity 1s ease; } .test-border { border: 1px solid red; width: 100%; height: 100%; color: red; } 

 <div> <div id="my-id">Hover here</div> <div id="info"> <div class="hc test-border">Information</div> </div> </div>