Скрыть текст внутри тега li

Question

Итак, у меня есть эти три тега li, у которых есть фон, который будет заменен изображением, а когда вы наведете элемент, он станет больше, и вы увидите полноразмерное изображение (сохраняя свою первоначальную ширину). Но я хочу, чтобы текст внутри li был скрытым, и когда вы наводите на него курсор, я хочу, чтобы он отображался. Я не уверен, как выбрать текст внутри li. Я попробовал атрибут: после, но не работал. Любая помощь приветствуется :)

<ul id="crew"> 
<li class="trevor">Trevor Philips was born and raised in Canada, near the Canada/United States border or as he calls it - the "Canadian border region of America". In a conversation with Franklin while hanging out, he claims he "grew up in five states, two countries, fourteen different homes, eight fathers, three care homes, two correctional facilities, one beautiful, damaged flower of a mother" and has "served time, my country, your country and myself."</li> 

<li class="michael">Michael de Santa was born in either 1965 or 1968, possibly in the Midwest, which would explain why he spent some of his earlier criminal career in North Yankton. As a child, he didn't have the advantages his children have and grew up in the poor environment of a trailer park with his parents. Like Trevor Philips and Franklin Clinton, Michael had a tough upbringing due to his father being an alcoholic and physically abusing him.</li> 

<li class="franklin">Franklin Clinton was born in South Los Santos in 1988. He never knew his father and his mother became a cocaine addict when Franklin was still young. As a child, Franklin often heard stories about how his father was physically abusive towards his mother, possibly causing her cocaine addiction. Franklin's father left his mother while she was pregnant with Franklin. His mother's addiction eventually led to her death when Franklin was young.</li> 

#crew li{display:inline-block;list-style-type:none; 
border-radius:20px; 
overflow:hidden; 
vertical-align:top; 
} 
.trevor{ 
background-color:red; 
height:90px; 
width:32%; 
} 
.trevor:hover{ 
background:plum; 
height:500px; 
width:32%; 
} 
.michael{ 
background-color:red; 
height:90px; 
width:32%; 
} 
.michael:hover{ 
background:plum; 
height:500px; 
width:32%; 
} 
.franklin{ 
background-color:red; 
height:90px; 
width:32%; 
background:gold; 
} 
.franklin:hover{ 
background:plum; 
height:500px; 
width:32%; 
} 

Answer 1

Вы не можете «выбрать текст» элемента, вы можете только выбрать элемент, который содержит этот текст. Тем не менее, я предлагаю - если остальную часть вашего публикуемую код работает так, как требуют - что следующий должен показать/скрыть текст, как вы хотите:

li { 
 
    /* 'transparent' a color keyword (like 'red,' 'white,' 'black,' etc) 
 
    equivalent to an rgba() color with its alpha set to 0: */ 
 
    color: transparent; 
 

 
    /* aesthetics; irrelevant to the demo, adjust to taste: */ 
 
    border: 1px solid #000; 
 
    padding: 0.5em; 
 
    margin: 0 0 0.5em 0; 
 
    list-style-type: none; 
 
} 
 

 
li:hover { 
 
    /* the changed color when the list is hovered-over: */ 
 
    color: #000; 
 
}

<ul id="crew"> 
 
    <li class="trevor">Trevor Philips was born and raised in Canada, near the Canada/United States border or as he calls it - the "Canadian border region of America". In a conversation with Franklin while hanging out, he claims he "grew up in five states, two countries, fourteen 
 
    different homes, eight fathers, three care homes, two correctional facilities, one beautiful, damaged flower of a mother" and has "served time, my country, your country and myself."</li> 
 

 
    <li class="michael">Michael de Santa was born in either 1965 or 1968, possibly in the Midwest, which would explain why he spent some of his earlier criminal career in North Yankton. As a child, he didn't have the advantages his children have and grew up in the poor environment 
 
    of a trailer park with his parents. Like Trevor Philips and Franklin Clinton, Michael had a tough upbringing due to his father being an alcoholic and physically abusing him.</li> 
 

 
    <li class="franklin">Franklin Clinton was born in South Los Santos in 1988. He never knew his father and his mother became a cocaine addict when Franklin was still young. As a child, Franklin often heard stories about how his father was physically abusive towards his mother, 
 
    possibly causing her cocaine addiction. Franklin's father left his mother while she was pregnant with Franklin. His mother's addiction eventually led to her death when Franklin was young.</li> 
 
</ul>

Который может, конечно, быть анимированы, если вам требуется, используя CSS переходы:

li { 
 
    color: transparent; 
 
    border: 1px solid #000; 
 
    padding: 0.5em; 
 
    margin: 0 0 0.5em 0; 
 
    list-style-type: none; 
 

 
    /* transitioning the color property, over 0.6 seconds, with 
 
    an animation of 'ease-in-out': */ 
 
    transition: color 0.6s ease-in-out; 
 
} 
 

 
li:hover { 
 
    color: #000; 
 
}

<ul id="crew"> 
 
    <li class="trevor">Trevor Philips was born and raised in Canada, near the Canada/United States border or as he calls it - the "Canadian border region of America". In a conversation with Franklin while hanging out, he claims he "grew up in five states, two countries, fourteen 
 
    different homes, eight fathers, three care homes, two correctional facilities, one beautiful, damaged flower of a mother" and has "served time, my country, your country and myself."</li> 
 

 
    <li class="michael">Michael de Santa was born in either 1965 or 1968, possibly in the Midwest, which would explain why he spent some of his earlier criminal career in North Yankton. As a child, he didn't have the advantages his children have and grew up in the poor environment 
 
    of a trailer park with his parents. Like Trevor Philips and Franklin Clinton, Michael had a tough upbringing due to his father being an alcoholic and physically abusing him.</li> 
 

 
    <li class="franklin">Franklin Clinton was born in South Los Santos in 1988. He never knew his father and his mother became a cocaine addict when Franklin was still young. As a child, Franklin often heard stories about how his father was physically abusive towards his mother, 
 
    possibly causing her cocaine addiction. Franklin's father left his mother while she was pregnant with Franklin. His mother's addiction eventually led to her death when Franklin was young.</li> 
 
</ul>

Литература:

• CSS Color Module Level 3.
• CSS Transitions.

Answer 2

Попробуйте это ..

использование CSS текст-отступов Свойства

показать парение:

#crew li{display:inline-block;list-style-type:none; 
border-radius:20px; 
overflow:hidden; 
vertical-align:top; 
text-indent: -9999; /* Add this line*/ 
} 
.trevor{ 
background-color:red; 
height:90px; 
width:32%; 
} 
.trevor:hover{ 
background:plum; 
height:500px; 
width:32%; 
text-indent: 0!important; /* Add this line*/ 
} 

скрыть парение:

#crew li{display:inline-block;list-style-type:none; 
border-radius:20px; 
overflow:hidden; 
vertical-align:top; 
} 
.trevor{ 
background-color:red; 
height:90px; 
width:32%; 
} 
.trevor:hover{ 
background:plum; 
height:500px; 
width:32%; 
text-indent: -9999; /* Add this line*/ 
}