Databases
StackOverflow2013
Postsdbo
POCSS hover result
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS hover result
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload