CSS pour le pop-up de l'image et planant

J'ai actuellement CSS, code HTML écrits, tels que lorsque vous passez la souris sur l'une des vignettes des images d'une plus grande image s'affiche au-dessus du pouce-cloué images. J'ai actuellement deux problèmes:

1.) Comment puis-je avoir de l'espace blanc au-dessus des vignettes par défaut à la première vignette de l'image

2.) Comment puis-je obtenir les photos à "rester debout" après qu'ils ont été planait sur de telle sorte qu'ils ne disparaissent à moins qu'une autre vignette est planait sur. Même si la souris entre dans l'espace blanc de la dernière planait image doit toujours être affiché.

Mon site web peut être trouvé ici avec l'image de l'afficheur en haut www.ignitionspeed.com
Aussi un bon exemple de ce que je recherche si c'est pas clair peut être trouvé ici autoblog.com

Voici le CSS que j'utilise pour ce 

<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>

Et voici le code 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>

Merci beaucoup!

vous avez besoin d'utiliser le javascript. créer un hover événement, qui est par défaut la première image, lors de la vignette est de se concentrer.
Il y a quelques démos par Eric Meyer qui couvrent une tâche similaire par la création d'un menu avec de la pure CSS popups ci-dessous: meyerweb.com/eric/css/edge/popups/demo.html et meyerweb.com/eric/css/edge/popups/demo2.html (avec des images).
êtes-vous le confort, si la solution utilise java-script/jquery?

OriginalL'auteur Trae | 2012-09-20

  1. 1

    Je ne pas si vous êtes familier avec Javascript et jQuery. Mais vous avez à utiliser Javascript pour atteindre l'effet désiré.

    Le moyen le plus simple pour y parvenir est par l'ajout d'une classe sur vos éléments lorsque vous passez la souris sur eux à l'aide de jQuery.

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

    Puis, dans votre CSS, juste modifier deux de vos sélecteurs:

    .thumbnail:hover, .thumbnail.hover {}
.thumbnail:hover span, .thumbnail.hover span {}
    "vous devez utiliser Javascript" je ne le pense pas; c'est juste un peu plus compliqué quand le faire en pure CSS; je voudrais downvote votre réponse pour que seule phrase – mais d'un autre côté c'est une solution de travail que vous avez posté ici...
    Le dernier flottait l'image doit rester visible lorsque n'a pas de vignette tournait et je ne peux pas penser à une façon de le faire avec pur CSS.

    OriginalL'auteur nebulousGirl

  2. 1

    Essayez ceci pour pur CSS et si vous souhaitez utiliser jQuery utilisation cette.

    OriginalL'auteur Arpit Srivastava