Alexis Delrieu Alexis Delrieu - 5 months ago 16
CSS Question

Animation CSS3: display + opacity

i have got a problem with a CSS3 animation.



.child {
opacity: 0;
display: none;

-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
opacity: 0.9;
display: block;
}


This code only works if I remove the change of display.

I want change the display just after the hover but the opacity change with the transition.

Answer

I changed a bit but the result is beautiful.

.child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.parent:hover child {
    width: 150px;
    height: 300px;
    opacity: .9;
}

Thank you to everyone.