CSS for popup and freezes

Question

I currently have CSS code with HTML text that when you hover over one of the thumbnail images, a larger image appears above the thumb images. I currently have two problems:

1.) How can I get white space above the default thumbnails for the first thumbnail

2.) How can I get pictures so as not to “sleep” after they have been hung so that they disappear only if another thumbnail does not hang on them. Even if the mouse falls into a space, the last image displayed should be displayed.

My website can be found here using the display device at the top of www.ignitionspeed.com. Also a good example of what I'm looking for, if not clear, can be found here autoblog.com

Here is the CSS I use for this

<style type="text/css"> .thumbnail{ z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; display: block; left: -1000px; visibility: hidden; color: red; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 10px; left: 13px; /*position where enlarged image should offset horizontally */ overflow:hidden; } </style> 

And here is the HTML

 <a class="thumbnail" href="http://www.ignitionspeed.com/2012/09/lexus-lf-cc-concept.html"><img src="http://i.tinyuploads.com/25rBVR.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/25rBVR.jpg" /><br /></span></a> <a class="thumbnail" href="http://www.ignitionspeed.com/2012/09/2009-bmw-m3-review-test-drive.html" ><img src="http://i.tinyuploads.com/IGoDa8.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/IGoDa8.jpg" /><br /></span></a> <a class="thumbnail" href="http://www.ignitionspeed.com/2012/09/2013-audi-s6-giant-leap-in-performance.html"><img src="http://i.tinyuploads.com/aSwPv9.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/aSwPv9.jpg" /><br /></span></a> <a class="thumbnail" href="http://www.ignitionspeed.com/2012/09/2012-lexus-lfa.html"><img src="http://i.tinyuploads.com/Gu1Pey.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/Gu1Pey.jpg" /><br /></span></a> <a class="thumbnail" href="http://www.ignitionspeed.com/2012/08/acura-nsx-future-is-already-here.html"><img src="http://i.tinyuploads.com/VJo9IP.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/VJo9IP.jpg" /><br /></span></a> <a class="thumbnail" href="http://www.ignitionspeed.com/2012/09/2012-jaguar-xkr-s.html"><img src="http://i.tinyuploads.com/REiZ6c.jpg" width="117px" height="72px" border="0" /><span><img src="http://i.tinyuploads.com/REiZ6c.jpg" /><br /></span></a> 

Thank you very much!

Answer 1

Try this for pure CSS , and if you want to use jQuery, use this .

Answer 2

I do not know if you are familiar with Javascript and jQuery. But you must use Javascript to achieve the desired effect.

The easiest way to achieve this is to add the class to your elements when you hover over them with jQuery.

 $('.thumbnail').mouseover(function() { //Removing any active hover class $('.thumbnail').removeClass('hover'); //Add class for the thumbnail that was just hovered $(this).addClass('hover'); }); 

Then in your CSS just change two of your selectors:

 .thumbnail:hover, .thumbnail.hover {} .thumbnail:hover span, .thumbnail.hover span {}