CSS Info boîte rollover

Question

J'essaie de créer un simple survol avec une image pour afficher un conseil ou une info-bulle/bulle. J'ai un wrapper div tenant l'image src, et css pour styler/positionner l'enveloppe et l'enfant. Je n'arrive pas à comprendre comment rendre le img src interactif. Voici le html:

<div class="wrapper"> 
     <img src="images/gallery/wheat3.png" width="250" height="250" data-stellar-ratio="3.5" data-stellar-vertical-offset="200"> 
    </div> 

Je veux créer un roulement avec l'image « wheat3.png » pour montrer et boîte d'information sur le côté.

Voici le lien de test ainsi: http://hatfielddesign.com/witbier_test/

Merci.

Answer 1

En visualisant le code source du lien de test que vous avez montré, il semble qu'ils utilisent Stellar.js pour implémenter cet effet. Prenez une lecture au docs, ils peuvent vous aider;)