title: How to Fade out with CSS Transition (Managed to fade in, but don't understand how to fade out without "Webkit")
body: <p>I have tried searching for this but cannot find it.
  I have created a class which when hovered over the pararaph element zooms in and decreases opacity. I have use a transition on this of (.5s). This works really well.
  However I have seen (I watched a video) that you can create a transition for after the hover.
  I have been trying to use: </p>
  
  <pre><code>image:hover:after p {
    transition: .5s;
  }
  </code></pre>
  
  <p>But it is not working. I do not understand these webkit options. And I have seen this done without the use of webkit. Basically, is it possible without webkit? Or is it my imagination?</p>
  
  <p>If webkit is the only way could someone link me to some AWESOME tutorials.</p>
  
  <p>This is what I currently have in my stylesheet :</p>
  
  <pre><code>.image p {
    color: black;
    font-weight: bold;
    background: rgba(235, 229, 235, .3);
  }
  
  
  .image:hover p {
    background: rgba(235, 229, 235, .9);
    transition: 0.5s;
    font-size: 110%;
  }
  </code></pre>
  
  <p>Thanks,</p>
  
  <p>Luke</p>