Effet de survol particulier
Fermé
Utilisateur anonyme
-
9 mars 2012 à 14:44
AssassinTourist Messages postés 5709 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 - 9 mars 2012 à 18:58
AssassinTourist Messages postés 5709 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 - 9 mars 2012 à 18:58
A voir également:
- Effet de survol particulier
- Site de vente entre particulier - Guide
- Effet miroir word - Guide
- Restreindre instagram effet - Guide
- Marketplace vente particulier - Guide
- Google workspace particulier - Guide
3 réponses
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
9 mars 2012 à 15:23
9 mars 2012 à 15:23
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à =)
Utilisateur anonyme
9 mars 2012 à 15:26
9 mars 2012 à 15:26
MERCI!
=)
=)
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
9 mars 2012 à 16:30
9 mars 2012 à 16:30
Ne me remercie pas trop vite, après, il faut faire marcher ça et ça peut être coton =)
bg62
Messages postés
23590
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
15 avril 2024
2 362
9 mars 2012 à 18:27
9 mars 2012 à 18:27
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 ... ;)
AssassinTourist
Messages postés
5709
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
29 février 2024
1 310
9 mars 2012 à 18:58
9 mars 2012 à 18:58
of course =)
