title: CSS transition fade out using opacity is not working
body: <p>I am trying to have a div where on hover the image fades out (so you can only see the gray background behind) and some text fades in. I have been trying to do this using CSS transitions, however the opacity does not seem to change (i.e. I can still see the background image). </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id='options'&gt;
    &lt;div class='option'&gt;
      &lt;div class='back-option'&gt;
      &lt;/div&gt;
      &lt;div class='front-option'&gt;
        Add post
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#options {
    font-family: 'Segoe UI', 'Arial', sans-serif;
  }
  
  .option {
    position: relative;
    width: 6.25em;
    height: 6.25em;
    border-radius: 5px;
    cursor: pointer;
    background-color: #363636;
  }
  
  .back-option {
    position: absolute;
    width: 6.25em;
    height: 6.25em;
    border-radius: 5px;
    background-image: url(http://png-5.findicons.com/files/icons/2672/pixel_ui/16/add.png);
    background-size: contain;
    -webkit-box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 0px 2px rgba(0,0,0,0.75);
    opacity: 1;
    transition: opacity 0.5s;
  }
  .back-option:hover {
    opacity: 0;
  }
  
  .front-option {
    position: absolute;
    width: 6.25em;
    height: 6.25em;
    border-radius: 5px;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    line-height: 6.25em;
    opacity: 0;
    transition: opacity 0.5s;
  }
  .front-option:hover {
    opacity: 1;
  }
  </code></pre>
  
  <p>Here is a <a href="http://jsbin.com/cucadami/1/edit?html,css" rel="nofollow">JSBin of it</a>.</p>