title: Hide text inside li tag
body: <p>So I have these three li tags that have a background that will be replaced with an image, and when you hover on the element, it'll get bigger and you'll see the full sized image (keeping its original width). But I want the text inside the li to be hidden and when you hover on it, I want to it be displayed. I'm not sure how to select the text inside the li. I tried the attribute :after but didn't work. Any help is appreciated :) </p>
  
  <pre><code>&lt;ul id="crew"&gt;
  &lt;li class="trevor"&gt;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."&lt;/li&gt;
  
  &lt;li class="michael"&gt;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.&lt;/li&gt;
  
  &lt;li class="franklin"&gt;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.&lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>#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%;  
  }
  </code></pre>