Effet de survol particulier
webird
-
AssassinTourist Messages postés 409 Date d'inscription Statut Contributeur Dernière intervention -
AssassinTourist Messages postés 409 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Je suis en train de faire un site et je souhaiterai y insérer des images avec un effet de survol quand la souris passe dessus. Jusque là pas de souci mais j'aimerais un effet bien particulier.
Comme dans ce site
https://www.thecut.net.au/
Je voudrais un truc du genre de leur triangle rouge qui arrive en glissant.
Avez-vous une idée du code qui le compose?
MERCI
Je suis en train de faire un site et je souhaiterai y insérer des images avec un effet de survol quand la souris passe dessus. Jusque là pas de souci mais j'aimerais un effet bien particulier.
Comme dans ce site
https://www.thecut.net.au/
Je voudrais un truc du genre de leur triangle rouge qui arrive en glissant.
Avez-vous une idée du code qui le compose?
MERCI
3 réponses
-
Bonjour,
Grâce à l'outil formidable de Firebug, j'ai vu leur code et ça donne ça :
<a href="/portfolio/clients/perth2011/projects/perth-2011-isaf-sailing-world-championships"> <span class="hover" style="opacity: 0; left: -160px;"></span> <img alt="1000 Sails" src="/static/cache/04/96/0496d9255c017cd417ef1d889bcdcc27.jpg"> <span class="project-client">Perth 2011</span> <span class="project-title">1000 Sails</span> </a>
Tout simplement, ils ont un span de class hover qui se trouve caché sur le côté. Il a aussi une opacité de 0 (il est invisible) Ce span n'est rempli qu'à moitié de rouge, formant ainsi un triangle.
Lors du onmouseover, son opacity augmente et avec jquery, il le fait glisser vers la droite. Et voilà =) -
-
regardes le code source :
<script src="/static/javascripts/jquery-1.5.1.min.js"></script> <script>window.jQuery || document.write("<script src='/static/javascripts/jquery-1.5.1.min.js'>\x3C/script>")</script> <script src="/static/javascripts/jquery.cycle.lite.1.1.min.js" type="text/javascript"></script> <script src="/static/javascripts/default.js" type="text/javascript"></script>
+ les css ... ;)
