css3 - CSS transition-delay on display

I have an element. On hover it goes opacity: 0; in 500ms. After 500ms I need to make it to display:none;.

Is this possible by using transition-delay on the display property?

.myEl {
transition: opacity 500ms, display 0ms ease 500ms;
opacity: 1;
display: block;
}


.myEl:hover {
display:none;
opacity:0;
}

This code above doesn't work for me :(

Fiddle here: http://jsfiddle.net/onvpn995/