title: Onclick event trigger another overlay div
body: <p>I have a image, I want to add some effects. Hover overlay <code>div</code> I was able to add it. Now what I want to do is to add <code>onclick</code> event and change to another overlay <code>div</code>.</p>
  
  <p>Here is my code, or see the <a href="http://codepen.io/anon/pen/Ecysx" rel="nofollow noreferrer">CodePen Here</a></p>
  
  <pre><code>  &lt;div id="box"&gt;
  
    &lt;div id="overlay"&gt;
      &lt;span id="plus"&gt;+&lt;/span&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body    {  background:#e7e7e7;}
  #box    {  width:300px;
             height:200px;
             float: left;
             box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
            border-bottom:2px solid #fff;
            border-right:2px solid #fff;
            margin:5% auto 0 auto; 
            background:url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
    background-size:cover;
  border-radius:5px;
  overflow:hidden;}
  
  #overlay    {  background:rgba(0,0,0,.75);
                 text-align:center;
                 padding:45px 0 66px 0;
                 opacity:0;
                 -webkit-transition: opacity .25s ease;}
  
  #box:hover #overlay {
                 opacity:1;}
  
  #plus       {  font-family:Helvetica;
                 font-weight:900;
                 color:rgba(255,255,255,.85);
                 font-size:96px;  }
  </code></pre>
  
  <p>I have only hover effect, when I click it should change Plus (+) to Minus (-) and at the bottom of the image <code>div</code> to appear a small div where will be placed a small description.</p>
  
  <p>When the second overlay div is triggered, and I press back on Minus (-) it should change back. I will add here a image so that you can see what I'm trying to do. </p>
  
  <p>In the image bellow you can see the blue <code>div</code> that should appear <code>onclick</code> event.</p>
  
  <p><img src="https://i.stack.imgur.com/bi9Fv.png" alt="enter image description here"></p>