How can I apply transitions to my elements that have display:none? - html

Question

I have some divs that appear when you hover an image. However, I want to have a transition rather than the images appearing so abruptly. I'm trying to avoid javascript if possible.
img {
display: none
}
p.one:hover + img {
display: block;
}
p.two:hover img {
display: block;
}
http://jsfiddle.net/nmeyf03r/56/

Answer 1

Transitions don't work with display: none. You can't fade in an element that's been removed from the page. Similarly, you can't fade out a display: block element. With display, the element is either in or out.
However, you can still transition your divs with CSS using the visibility, opacity and height properties.
HTML
<p class="one">HOVER OVER ME - IMG IS SIBLING</p>
<img src="http://www.placecage.com/100/100">
<p class="two">HOVER OVER ME -IMG IS CHILD</p>
<img src="http://www.placecage.com/100/100">
CSS
img {
visibility: hidden;
opacity: 0;
height: 0;
transition: height .5s linear, opacity .5s linear;
}
p.one:hover + img {
visibility: visible;
opacity: 1;
height: 100px;
transition-delay: 0s;
}
p.two:hover + img {
visibility: visible;
opacity: 1;
height: 100px;
transition-delay: 0s;
}
Here's your demo, updated with the code above:
http://jsfiddle.net/nmeyf03r/58/