Change CSS code when div elemet ist clicked : I'm currently trying to make a little photo album for a website.
There are some small photo thumbnails on the left side. If you click one of them it should appear on the right side in full resulution. I thought you could solve this by overlapping all pictures and put them in `display: none`. Every time you click on a thumbnail image a little javascript function triggers which changes the  css of the specific picture to `display: block` to make it visible. Here's my existing code incl. JSfiddle:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->


    .images{
      float: left;
      margin-right: 10px;
      border: 1px solid silver; 
      width: 100px; 
      height: 100px; 
      overflow: hidden; 
      margin-bottom: 50px;
      border: 4px solid transparent;}

    .images img{
      height: 100px;
      width: auto;}
      
    .images:hover, .images:visited, .images:active {
      border: 4px solid #009EE0;}
      
    .table {
      width: 60%;
      height: 100%;
      border-right: 1px solid silver;
      float: left;}

<!-- language: lang-html -->

    <div class="table">
      <div class="images">
        <img src="http://mgt.sjp.ac.lk/ent/wp-content/uploads/2015/03/coming-soon-bigger-600x600.jpg" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
      </div>
      <div class="images">
        <img src="https://www.drphillipscenter.org/resources/images/default.jpg" alt="DK_2014_MFK_Radtour_0168.jpg, 241kB" title="DK 2014 MFK Radtour 0168" height="auto" width="300">
      </div>
    </div>
    <p>When clicked, I want the Picture to appear right here but sized bigger.</p>


<!-- end snippet -->

https://jsfiddle.net/zar2u0v1/1/

Better suggestions as hiding all the images would be nice because the lack of performance would be a problem.
Thanks in advance and I hope you can help me!
