title: CSS hover result
body: <p><a href="http://home.scarlet.be/makhout/CarsDeluxe/wagens.html" rel="nofollow">webPage</a> </p>
  
  <p><strong>Question #1</strong><br>
  When hovering over the 'cars menu' it will fade a bit to black. I did this with jQuery.</p>
  
  <ul>
  <li>Is it possible to do that same effect with CSS(3)?</li>
  <li>and is it possible to change the fading color(with or without jQuery)?</li>
  </ul>
  
  <p><strong>Question #2</strong><br>
  When clicking the 'cars menu' You will get thumbnails of images of the cars en some information. When hovering over a thumbnail you'll get to see the image in a bigger format. But only the first left upper image hovers good, but all the rest is cutted and its position is very off. </p>
  
  <p>This is for me the biggest problem that I can't seem to solve. I reviewed my CSS code a bit, everything looks fine for me. I have been experimenting a bit, but no success.</p>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code> &lt;div class="car1"&gt;
  
                      &lt;h1&gt;Audi A6&lt;/h1&gt;
                      &lt;div class="specs"&gt;
                          &lt;table&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;Merk:&lt;/td&gt;
                                  &lt;td&gt;Audi &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;Model:&lt;/td&gt;
                                  &lt;td&gt;A6 avant&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;Bouwjaar:&lt;/td&gt;
                                  &lt;td&gt;2009&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;Uitvoering:&lt;/td&gt;
                                  &lt;td&gt;Diesel&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
  
                          &lt;div&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!-- ID patroon van Thumbnaal c(ars) X(hoeveelste wagen nummer) Y(hoeveelste thumbnail nummer)--&gt;
                      &lt;div class="pics"&gt;
                           &lt;a class="thumbnail" href="#thumb"&gt; 
                              &lt;img class="thumb" src="Cars/audi/1.jpg" alt="Voorkant Audi A6" /&gt; 
                              &lt;span&gt;
                                  &lt;img class="large" src="Cars/audi/1.jpg" alt="Voorkant Audi A6" /&gt;
                              &lt;/span&gt;
                           &lt;/a&gt;
  
                           &lt;a class="thumbnail" href="#thumb"&gt; 
                              &lt;img  src="Cars/audi/2.jpg" alt="Achterkant Audi A6"  class="thumb"/&gt; 
                              &lt;span&gt;
                                  &lt;img class="large" src="Cars/audi/2.jpg" alt="Achterkant Audi A6" /&gt;
                          &lt;/span&gt;
                          &lt;/a&gt;
  
                           &lt;a class="thumbnail" href="#thumb"&gt; 
                              &lt;img  src="Cars/audi/3.jpg" alt="Rijdende Audi A6"  class="thumb"/&gt; 
                              &lt;span&gt;
                                  &lt;img class="large" src="Cars/audi/3.jpg" alt="Voorkant Audi A6" /&gt;
                              &lt;/span&gt;
                          &lt;/a&gt;
  
                           &lt;a class="thumbnail" href="#thumb"&gt; 
                              &lt;img  src="Cars/audi/4.jpg" alt="Audi A6 geparkeerd"  class="thumb"/&gt; 
                              &lt;span&gt;
                                  &lt;img class="large" src="Cars/audi/4.jpg" alt="Audi A6 geparkeerd" /&gt;
                              &lt;/span&gt;
                          &lt;/a&gt;
  
                          &lt;a class="thumbnail" href="#thumb"&gt; 
                              &lt;img  src="Cars/audi/5.jpg" alt="Zijkant Audi A6"  class="thumb"/&gt; 
                              &lt;span&gt;
                                  &lt;img class="large" src="Cars/audi/5.jpg" alt="Zijkant Audi A6" /&gt;
                              &lt;/span&gt;
                          &lt;/a&gt;
  
                          &lt;!--  &lt;img class="thumbnail" src="Cars/audi/2.jpg" alt="Achterkant Audi A6"&gt;
                              &lt;img class="large" src="Cars/audi/2.jpg" alt="Achterkant Audi A6"&gt;
                            &lt;img class="thumbnail" src="Cars/audi/3.jpg" alt="Rijdende Audi A6"&gt;
                              &lt;img class="large" src="Cars/audi/3.jpg" alt="Rijdende Audi A6"&gt;
                            &lt;img class="thumbnail" src="Cars/audi/4.jpg" alt="Audi A6 geparkeerd"&gt;
                              &lt;img class="large" src="Cars/audi/4.jpg" alt="Audi A6 geparkeerd"&gt;
                            &lt;img class="thumbnail" src="Cars/audi/5.jpg" alt="Zijkant Audi A6"&gt;
                              &lt;img class="large" src="Cars/audi/5.jpg" alt="Zijkant Audi A6"&gt;--&gt;
  
                      &lt;/div&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS code</strong></p>
  
  <pre><code>.thumbnail{
      /*width:10em;   
      height:7em;
      margin:1%;*/
      z-index:0;
      position:relative;
  }
  
  .thumbnail:hover{
  background-color: transparent;
  z-index: 50;
  }
  
  .thumbnail span{ /*CSS for enlarged image*/
  position: absolute;
  left: -1000px;
  visibility:hidden;
  overflow:visible;
  text-decoration: none;
  
  }
  
  .thumbnail span img{ /*CSS for enlarged image*/
  border-width: 0;
  padding: 2px;
  overflow:visible;
  }
  
  .thumbnail:hover span{ /*CSS for enlarged image on hover*/
  visibility:visible;
  top: 100%;
  left:1%; /*position where enlarged image should offset horizontally */
  overflow:visible;
  
  }
  
  .large{
      width: 45em;    
  }
  
  .thumb{
  
      width:40%;
  }
  
  .thumb:hover{
      border:1px white solid; 
  }
  </code></pre>
  
  <p>If something is still needed please ask me, I will provide the information needed.</p>