title: Change Text On Hover with CSS, Also Style That Text
body: <p>Been stuck on this for ages, tried going to every link on first page of Google after searching "css change text on hover", no luck though.</p>
  
  <p>I have text in the middle of a div, that text has it's own div which is styling the text and deciding the text position.</p>
  
  <p>However I want the text to change when you hover over the div it is in and with CSS. </p>
  
  <p>I've read guides of content/:before/:after but it made it much more confusing.</p>
  
  <p>Here's the current code that does its current job fine:</p>
  
  <pre><code>/* Circles in the services section*/
  .servicecircle { 
  width: 204px; 
  height: 204px;
  background-image: url('/anonymous/for/reasons.png');
  display: inline-block;
  background-repeat: no-repeat;
  margin-left: 22px;
  margin-right: 22px;
  /* Button transition*/
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
  }
  
  .servicecircle:hover{
  background-image: url('/anonymous/for/reasons.png');
  cursor: pointer;
  }
  </code></pre>
  
  <p>I DID manage to get the text changing with the below code, however the divs were no longer aligned properly and I looked everywhere but found no way of styling the text within content.</p>
  
  <pre><code>/* Circles in the services section*/
  .servicecircle:after { 
  width: 204px; 
  height: 204px;
  background-image: url('/anonymous/for/reasons.png');
  display: inline-block;
  background-repeat: no-repeat;
  margin-left: 22px;
  margin-right: 22px;
  /* Button transition*/
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
  /* Content is inserted */
  content: 'Service 1';
  }
  
  /* Changes content on hover */
  .servicecircle:hover:after{
  background-image: url('/anonymous/for/reasons.png');
  cursor: pointer;
  content: 'Service Description..';
  }
  </code></pre>
  
  <p>This entire thing is inserted into the page with</p>
  
  <pre><code>&lt;div class="servicecircle"&gt;                                 
   &lt;/div&gt;
  </code></pre>
  
  <p>Is what I'm after even possible CSS?</p>
  
  <p>P.S
  If possible a link to a good guide would be great, I'm still fairly new to CSS so this might be a bit out of my league. All guides I've read use code I've never even seen before</p>