title: Make a thumbnail image large when clicked using html/css3 only
body: <p>I want to make an image larger on click/double click the thumbnail and then when i hover that real image it should zoom... till now i can hover a thumbnail and it showsthe real image but i want to use click (to display) and then hover the real image...i dont want to use js, isn't there any property in css3 which could help?</p>
  
  <p>here is my code for this</p>
  
  <pre><code>    &lt;section&gt;
  &lt;li&gt;&lt;a class="thumbnail" href="#"&gt;
                                              &lt;img src="graphics/blue1.jpg" alt= "" width="100" height="150" /&gt;
                                              &lt;span&gt;&lt;img src="graphics/blue1.jpg"/&gt;&lt;br /&gt;&lt;/span&gt;&lt;/a&gt;
                                              &lt;/li&gt;
  
                                              &lt;li&gt;&lt;a class="thumbnail" href="#"&gt;
                                              &lt;img src="graphics/blue2.jpg" alt="" width="100" height="150" /&gt;
                                              &lt;span&gt;&lt;img src="graphics/blue2.jpg" /&gt;&lt;/span&gt;&lt;/a&gt;
                                              &lt;/li&gt;
                                              &lt;li&gt;
                                              &lt;a class="thumbnail" href="#"&gt;&lt;img src="graphics/blue3.jpg" alt="" width="100" height="150" /&gt;
                                              &lt;span&gt;&lt;img src="graphics/blue3.jpg"/&gt;&lt;br /&gt;&lt;/span&gt;&lt;/a&gt;
                                              &lt;/li&gt;
  
  
                          &lt;/section&gt;
  </code></pre>
  
  <p>here is css for these thumbnails</p>
  
  <pre><code> section li {
                  list-style:none;
                      }
  
  .thumbnail{
  position: relative;
  z-index: 0;
  }
  
  .thumbnail:hover{
  background-color: transparent;
  z-index: 50;
  }
  
  .thumbnail span{ /*CSS for enlarged image*/
  position: absolute;
  background-color:#eee;
  padding:5px;
  left: -1000px;
  border: 1px dashed gray;
  visibility: hidden;
  color: black;
  text-decoration: none;
  }
  
  .thumbnail span img{ 
  border-width: 0;
  padding: 1px;
  }
  
  .thumbnail:hover span{ 
  visibility: visible;
  top: 10px;
  left: 120px; 
  }
  </code></pre>
  
  <p>also on the mouse hover the hover image goes down instead of coming infront in front..</p>