Comment créer un effet moteur Google images?

Question

J'essaye de créer l'effet de moteur d'image de google qui montre des crédits d'images quand l'utilisateur survole l'image (agrandissez l'image et montrez des crédits). Je ne suis pas sûr de savoir comment faire apparaître l'image et ignorer le flux du contenu. Je sais que lightbox ferait l'effet similaire, mais tout ce dont j'ai besoin est un simple effet de survol et d'affichage des crédits d'images. J'ai recherche google et tout ce que j'ai obtenu sont des plugins popup comme lightbox. Je me demandais si quelqu'un me donnait une direction ou un tutoriel pour cela? Merci beaucoup.

Answer 1

J'ai créé un exemple de base qui agrandit l'image et affiche la boîte. Pour en faire une solution générale, un javascript plus fin est nécessaire.

Je crée une div invisible contenant un élément img avec la même image. Dans l'événement onmouseover de l'élément img d'origine, je démarre une minuterie, qui affiche la div avec l'élément img en double. Lorsque la div est affichée, une autre minuterie est démarrée. Lorsque la minuterie se déclenche, je change la taille et la position de la div et la taille de l'image dans la div. En utilisant CSS3 Transistions le navigateur fera automatiquement le changement de taille dans une animation qui ressemble à un zoom.

J'ai testé mon code dans Chrome mais il devrait aussi fonctionner dans Firefox et Opera. IE ne montrera pas l'animation.

Lien: Here

Utilisez ma source comme point de départ.

EDIT: J'ai écrit une meilleure version du code qui prend toutes les images qui ont la classe pouces et les rend zoom. Cette version est un peu plus compliquée que l'ancienne. Encore une fois, jetez un oeil à la source et n'hésitez pas à poser des questions dans les commentaires ci-dessous.

Lien: Here

Answer 2

Cela montrera un div flottant au-dessus du conteneur div pour l'image.

<div id="yourImage1Parent"><img id"yourImage1" src="yourImage1src.jpg" /></div> 
<script type="javascript/text"> 
var credits = document.createElement("div"); 
credits.style = "position: absolute; height:25px; width: 25px"; 
credits.innerHTML = //load credits from ajax or array or logic, maybe from data-attribute 
document.getElementById("yourImage1Parent").appendChild(credits); 
</script> 

Cependant, il est simpliste. Il a besoin d'un événement à câbler pour contrôler la visualisation de cet élément et la suppression de l'élément. Comme il n'y avait pas de code réel pour un exemple, ce code n'est qu'un exemple.