title: Javascript Enlarge Thumbnail
body: <p>Im in the process of making a site and would like to have a section in which there are three pictures and a paragraph.  Two of the pictures are small and the other large.  I'd like to have it so when you click on one of the smaller pictures, it takes the spot of the bigger one and what was the bigger one would shrink and take the spot of the thumbnail.  Any idea how I would go about doing this?  Thanks!</p>
  
  <pre><code>&lt;div class='picture-container' id='pc1'&gt;
      &lt;div class='large-picture' id='lp1'&gt;
          &lt;img src='make-up_artist_dupontstudios.png' width='45%' height='100%' class='no-mobile' style='float:left;' /&gt;
          &lt;div class='picture-content' style='float:right;'&gt;
              &lt;div class='picture-title'&gt;BOUTIQUE PRODUCTION STUDIO&lt;/div&gt;
              &lt;div class='picture-text'&gt;We built a boutique full service production studio that allows for one, two and three person filmed interviews and conversations. We have studio lights, a three camera set-up and remote monitoring. Additionally, our Infinity Wall creates a clean and professional look that allows the film to be about the message.&lt;/div&gt;
              &lt;div class='small-picture' style='float:left;'&gt;
                  &lt;img src='hair_and_makeup_dupontstudios.png' width='175' height='100' /&gt;
              &lt;/div&gt;
              &lt;div class='small-picture'&gt;
                  &lt;img src='infinity_wall_dupontstudios.png' width='175' height='100' /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Update: here's some CSS</p>
  
  <pre><code>.picture-container{
      height:300px;
      width:99%;
      margin-left:auto;
      margin-right:auto;
  }
  
  .picture-content{
      width: 100%;
      margin: 0 auto;
      text-align:center;
      font-size:75%;
  }
  
  .picture-text{
      font-size:65%;
      padding-top:25px;
  }
  
  .picture-title{
     color:#FE2E2E;
     font-size:85%;
  }
  
  .small-picture{
      float:left;
      padding-right:25px;
      padding-top:25px;
      display:none;
  }
  
  #text-container{
      margin: 0 auto;
      width:90%;
  } 
  </code></pre>