title: How do I make an image appear when pressing a button?
body: <p>How can I make a button show and/or hide a picture after I've pressed it?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-color: #000;
    background-image: url(http://www.carolyndecristofano.com/wp/wp-content/uploads/2012/03/iStock_000017124788Large.jpg);
    background-repeat: no-repeat;
  }
  header {
    width: 1906px;
    height: 980px;
    background-image: url(https://stormideaswus.blob.core.windows.net/headerjunction/2014/91/6d2380c6-00e3-4f58-a911-c8aa98afa460.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    position: relative;
    bottom: 78px;
    right: 10px;
  }
  .button {
    display: block;
    height: 100px;
    width: 940px;
    background: #34696f;
    border: 2px solid rgba(33, 68, 72, 0.59);
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    font: bold 3.2em/100px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    background: linear-gradient(top, #34696f, #2f5f63);
    border-radius: 50px;
    box-shadow: 0 8px 0 #1b383b;
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
  }
  a.button {
    position: relative;
    bottom: 78px;
    text-decoration: none;
  }
  .button2 {
    display: block;
    height: 100px;
    width: 940px;
    background: #34696f;
    border: 2px solid rgba(33, 68, 72, 0.59);
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    font: bold 3.2em/100px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    background: linear-gradient(top, #34696f, #2f5f63);
    border-radius: 50px;
    box-shadow: 0 8px 0 #1b383b;
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
  }
  a.button2 {
    position: relative;
    bottom: 182px;
    left: 945px;
    text-decoration: none;
  }
  #show {
    background-image: url(http://i.imgur.com/iEMr3n4.png) position: relative;
    left: px;
    bottom: 300px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;&lt;/header&gt;
  
  &lt;a href="" class="button"&gt;Manipulation&lt;/a&gt;
  &lt;a href="" class="button2"&gt;Orgininal&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://codepen.io/anon/pen/JGKJKa" rel="nofollow">View on CodePen</a></p>