Effet de survol particulier
Utilisateur anonyme
-
AssassinTourist Messages postés 6029 Date d'inscription Statut Contributeur Dernière intervention -
AssassinTourist Messages postés 6029 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
A voir également:
- Effet de survol particulier
- Meilleur site de vente entre particulier - Guide
- Effet miroir word - Guide
- Annuaire espagne gratuit particulier ✓ - Forum telephonie fixe
- Whatsapp répondre à un message en particulier - Guide
- Effet miroir photo ✓ - Forum Bureautique
3 réponses
Bonjour,
Grâce à l'outil formidable de Firebug, j'ai vu leur code et ça donne ç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à =)
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 :
+ les css ... ;)
<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 ... ;)