Fading popup dialog with css (not jquery)
<p>I have a very simple pop up image using CSS. I would like to know if there's a way to fade it. All my efforts with transitions -o-transition; -ms-transition, -moz-transition; -webkit-transition; transition,; bla, bla, bla ... didn't make anything.</p>

<p>thanks</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>#button {
  position: relative;
  margin: 1px 0 0 0;
  padding-top: 10px;
  cursor: pointer;
  display:inline-block;
  position:absolute;
  list-style:none;
  margin:0;
  padding:0;
  background-repeat:no-repeat;
  background-size:cover;
}

.popup {
  position: absolute;
  padding-top:30px;
  width: 100%;
  height: 100%;
  display: none;
  text-align:center;
  background-color:rgba(0, 0, 0, 0.8);
  z-index: 101;
}

.popup:target {
  display: block;
}

.popup img {
  padding: 10px;
  z-index: 120;
  border: solid 1px gray;
  cursor: pointer;
  background-color:#FFFFFF;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div&gt;
   &lt;!-- button --&gt;
   &lt;div id="button"&gt;
     &lt;a href="#bigger" title="LALA"&gt;&lt;img src="http://imagenes.es.sftcdn.net/es/scrn/115000/115177/thumbnail_1459842713-100x100.png" title="Landscape button" alt="landscape"&gt;&lt;/a&gt;
   &lt;/div&gt;

   &lt;!--pop up--&gt;
   &lt;div id="bigger" class="popup"&gt;
     &lt;a href="#"&gt;&lt;img src="http://www.robertofarrenphotography.com/wp-content/uploads/galleries/post-1336/thumbnails/BOSTON%20LANDSCAPE%20PHOTOGRAPHER_USA_049.jpg" alt="landscape"/&gt;&lt;/a&gt;
   &lt;/div&gt;
 &lt;/div&gt;
      </code></pre>
</div>
</div>
</p>