En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
 
Vous êtes ici :   Accueil » Images avec Hover Effects
 
 
 
    Imprimer la page...
    Imprimer la section...

Images avec Hover Effects

Des images qui changent lors du survol de la souris
avec des effets variés (transformations, rotations, translations...)

Ces 10 propositions ci-dessous sont issues de ce site :
https://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ (auteur : Alessio Atzeni)

info licence : https://tympanus.net/codrops/licensing/

Tout est téléchargeable sur le site, c'est très pratique, et le tutoriel (en anglais) est très bien fait. Je me suis juste contenté de jouer avec et de modifier à la marge les propositions. J'ai pu ajouter aussi au script original le fait de pouvoir mettre des images dans le contenu qui apparait au survol. (majdoc.gif) Une mise à jour permet d'augmenter ses possibilités.

Hover Style #1

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus
Mise à jour

Hover Style #2

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #3

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #4

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #5

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #6

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #7

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #8

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #9

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #10

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
tongue.gif

Lire plus

Hover Style #9bis

Une autre image de cet effet pour montrer les angles de rotation : ici 76° et -14°. Voir plus bas dans l'article le code et la méthode de calcul.

Les codes utilisés sont ci-dessous.
Le contenu du premier onglet : Style commun est obligatoire, soit au début du code source de l'article ou de la boite libre, soit dans styleplus.css.
Ensuite, ajouter au même endroit les codes correspondant aux effets souhaités, en adaptant à l'aide des quelques commentaires.
ATTENTION, si le style n'est pas dans styleplus.css, il faut placer les balises <style type="text/css"> au début du code source et </style> à la fin du style.
Puis dans le code source du corps de l'article ou de la boite libre, là où vous souhaitez placer les images, insérez le code correspondant en adaptant les contenus, bien sûr. Ces codes sont très proches les uns des autres à part pour le #9.

Dans les codes du corps de l'article ci-dessus, seules les lignes surlignées en vert sont obligatoires. Notez l'id="front-img" pour bien différencier l'image du devant et celle(s) que vous pourriez ajouter dans le contenu "caché". Les lignes surlignées en jaune ne servent qu'à placer les images de ce tutoriel dans le flux ou à les faire retourner à la ligne. Mes images sont dans un dossier images placé dans le dossier img à la racine de GuppY. Il faut évidemment adapter les sources à votre configuration.

Pour montrer l'utilisation d'autres images avec des formats différents et notamment pour l'effet #9, j'ai ajouté une image rectangulaire et son code complet associé #9bis. Notez les classes .view0 pour cet exemple afin de le différencier de la série précédente avec .view et les afficher dans la même page. L'image fait 400x100px. Il y a deux angles à calculer pour les rotations des masques (ICI, un rappel de la méthode trigonométrique de calcul). Donc un angle au sommet dont la tangente est de 400/100, ce qui correspond dans une table trigonométrique, ou avec la calculatrice scientifique à 75,96...° soit environ 76°. L'angle à la base mesure donc 90°-76° = 14°. Ce sont ces valeurs qui sont utilisées dans le code ci-dessus.

ATTENTION : Sur les écrans tactiles, smartphones, tablettes... l'effet de survol, évidemment ne fonctionne pas et il faut "cliquer" pour déclencher l'effet.

majdoc.gif Mise à jour :

À la demande d'Aramise, qui souhaitait ajouter une image de nouveauté ou du texte en superposition d'une image front-img pour signaler qu'un changement avait eu lieu sur la face cachée, j'ai proposé cette petite astuce, très simple à mettre en place.

Dans le corps du code, vous avez, par exemple :

<div style="display: inline-block;">
    <div class="view view-first"><img id="front-img" src="img/images/image01.jpg" />
        <div class="mask">
            <h2>
Hover Style #1</h2>
            <p>
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.</p>
            <a class="info" href="http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/" target="_blank">
Lire plus</a>
        </div>
    </div>
</div>

Il suffit d'ajouter le bout de code à la suite de l'image front-img, et vous réglez la position comme vous le souhaitez (ici 10 px en bas et à droite). C'est l'effet qui est en place dans l'image démo 1.

<div style="display: inline-block;">
    <div class="view view-first"><img id="front-img" src="img/images/image01.jpg" />
<span style="position: absolute; bottom:10px; right:10px;"><img id="front-img" src="img/images/MAJ.png" /></span>
        <div class="mask">
            <h2>
Hover Style #1</h2>
            <p>
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.</p>
            <a class="info" href="http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/" target="_blank">
Lire plus</a>
        </div>
    </div>
</div>

Aramise a trouvé une solution texte clignotant que je vous livre également. Un peu plus complexe, elle nécessite l'ajout de règles de style dans le style commun par exemple :

.MESSAGE  {
  position: absolute;
  right: 2%;
  top: 10%;
  width: 100%;
  text-align: right;
  font-size: 26px;
  color: #FF0000;
  font-weight: bold;
  animation-name: animationMESSAGE;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes animationMESSAGE {
    0%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}

Et dans le code souhaité, compléter ainsi :

<div style="display: inline-block;">
    <div class="view view-second"><img id="front-img" src="img/images/image02.jpg" />
<div class="MESSAGE">Mise à jour</div>
        <div class="mask">
            <h2>
Hover Style #2</h2>
            <p>
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.</p>
            <a class="info" href="http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/" target="_blank">
Lire plus</a>
        </div>
    </div>
</div>

C'est l'effet qui est en place dans l'image démo 2.

L'avantage de cette astuce est que l'on peut mettre le texte souhaité. L'inconvénient est que la règle installe la position pour toutes les images. Les deux solutions peuvent évidemment cohabiter...

Amusez-vous bien...

Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.


Date de création : 13/11/2016 @ 19:28
Dernière modification : 15/11/2019 @ 10:46
Catégorie : Astuces - Changements au survol
Page lue 10152 fois