title: Button click to show overlay over image (only CSS)
body: <p>I am trying to achieve that when you click the yellow circle with fa-icon inside that then the overlay shows over my image. Now the overlay shows below the image (green background with white text). My overlay code works, to see that, change <code>div id="overlay"</code> to <code>div class="overlay"</code>.
  How to make the button click show my overlay over the image (no javascript)?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*@media screen and (max-width: 767px) {*/
    .button i {
      padding: 8px 13px;
      display: inline-block;
      -moz-border-radius: 180px;
      -webkit-border-radius: 180px;
      border-radius: 180px;
      -moz-box-shadow: 0px 0px 2px #888;
      -webkit-box-shadow: 0px 0px 2px #888;
      box-shadow: 0px 0px 2px #888;
      background-color: yellow;
      color: red;
      position: absolute;
      left: 20%;
      top: 20%;
    }
  /*}*/
  
  .button i:hover {
    color:#FFF;
    background-color:#000;
   }
  
  /*@media screen and (min-width: 768px) {*/
    .product-detailscar:hover .overlay {
      opacity: 1;
    }
  /*}*/
  
  .product-detailscar {
      background-color: #E6E6E6;
      text-align: center;
    position: relative;
  }
  
  .intro, .userfield1car {
    color:#fff;
    font-weight:700;
    font-size:22px;
    text-align:center;
    background-color:green;
   }
  
  .product-detailscar .overlay {
    /*.well.carousel .overlay {*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 0;
    background: blue;
    color: #FFF;
    text-align: left;
    border-top: 1px solid #A10000;
    border-bottom: 1px solid #A10000;
    /*vertical-align: middle;*/
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;div&gt;
          &lt;a href="#" target="_blank"&gt;
          &lt;div class="product-detailscar"&gt;
              &lt;div class="image-video-linksidebar"&gt;
                  &lt;img alt="#" src="http://lorempixel.com/200/200"&gt;
                  
                &lt;div class="read-more"&gt;&lt;a href="#overlay" class="button"&gt;&lt;i class="fa fa-file-text-o fa-3x" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="overlay"&gt;
                  &lt;div class="intro"&gt;
                      Intro description car
                  &lt;/div&gt;
                  &lt;div class="userfield1car"&gt;
                      Userfield-1-car
                  &lt;/div&gt;
                  &lt;div class="userfield1car"&gt;
                      Userfield-2-car
                  &lt;/div&gt;
                  &lt;div class="userfield1car"&gt;
                      Userfield-3-car
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
         &lt;!--&lt;/div&gt;--&gt;&lt;/a&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>