I have a child image that is initially hidden, but shows up when someone hovers over the parent image. The issue I am facing is that when the child image appears, it does so on the right-hand side of the parent image.
I was under the impression that it would appear below the parent image by default. Shouldn't setting the display to "initial" return the element to its default state?
.child {
display:none;
}
.parent:hover .child {
display:initial;
}
<div class="parent">
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300">
<div class="child">
<img src="http://xiostorage.com/wp-content/uploads/2015/10/test.png" width="200">
</div>
</div>
This query is solely for my understanding of the CSS property display:initial
. I am not looking to position the child image above, below, to the right or left of the parent image.