<li> img and description disappearing when display:none is applied - css

Question

My li element has a img as background and the text written to the side. I want to display: none just the text and make it appear only on hovering. However if i apply display: none to the span element having text it takes out the whole li element.please check the images attached.
Li Element with list style image and description
HTML
CSS

Answer 1

You may try this. You will get appear Text on Hover Image using only
css.
body
{
font-family: sans-serif;
}
.image-hover-text-container
{
position: relative;
display: inline-block;
width: auto;
height: auto;
transition: all 0.2s linear;
}
.image-hover-image
{
display: block;
}
/* Make the image round */
.image-hover-image img
{
border-radius: 0%;
width: 300px;
}
.image-hover-text
{
position: absolute;
top: 0;
width: 100%;
height: 100%;
margin: 0 auto;
opacity: 0;
cursor: default;
transition: opacity 0.2s linear;
}
.image-hover-text:hover
{
opacity: 1;
}
.image-hover-text-bubble
{
position: relative;
box-sizing: border-box;
top: 0; left: 0; right: 100%;
height: 100%;
text-align: center;
background: rgba(218, 211, 211, 0.9);
border-radius: 0%;
margin: 0 auto;
padding: 30% 0px;
overflow: hidden;
font-size: 17px;
text-align: center;
word-wrap: break-word;
}
.image-hover-text .image-hover-text-title
{
font-size: 25px;
display: block;
}
<div class="image-hover-text-container">
<li class="image-hover-image">
<img src="http://dummyimage.com/600x400/38acf0/a9e1f2.jpg">
</li>
<div class="image-hover-text">
<div class="image-hover-text-bubble">
<span class="image-hover-text-title">Sample</span>
This Text display on Hover the Image.
</div>
</div>
</div>

Answer 2

Take a look at css selectors
You're using this selector on the post so i think you're not using the same selector on your code to perform display: none;
#fixed ul li a span{
display: none;
}
This will apply the display: none; in a descendant way (Any element matching span that is a descendant of an element matching a, that is a descendant of an element matching li etc.
#fixed > ul > li > a > span{
display: none;
}
This is a more "strict" way to do almost the same (Any element matching span that is a direct child of an element matching a, etc.)
Both should work (see the example below). So if not, you may have an error on your code that applies inheritance of display property or something similar, or your full code has differences between both selectors (maybe you need to select direct childs and you're selecting descendants).
Try first to apply direct child selector simply adding > between descendants, if not work inspect and try to find where inheritance is applied.
Another possible reason is that you may be using js or jquery to apply display none and it's not catching the selector properly so, try to inspect and fins where is the display property applied. (Maybe you coded a $('#fixed').hide();?
ul#first > li > a > span{display: none;}
ul#second li a span{display: none;}
<ul id="first">
<code>ul#first > li > a > span{display: none;}</code>
<li>icon- <span>a</span></li>
<li>icon- <span>b</span></li>
</ul>
<ul id="second">
<code>ul#second li a span{display: none;}</code>
<li>icon- <span>a</span></li>
<li>icon- <span>b</span></li>
</ul>
<ul id="third">
<code>No css applied</code>
<li>icon- <span>a</span></li>
<li>icon- <span>b</span></li>
</ul>