Effet de survol particulier [Fermé]

Signaler
-
Messages postés
5695
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
14 octobre 2020
-
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

3 réponses

Messages postés
5695
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
14 octobre 2020
1 138
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à =)

MERCI!

=)
Messages postés
5695
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
14 octobre 2020
1 138
Ne me remercie pas trop vite, après, il faut faire marcher ça et ça peut être coton =)
Messages postés
23133
Date d'inscription
samedi 22 octobre 2005
Statut
Modérateur
Dernière intervention
5 mai 2021
2 230
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 ... ;)
Messages postés
5695
Date d'inscription
lundi 16 janvier 2012
Statut
Contributeur
Dernière intervention
14 octobre 2020
1 138
of course =)