Effets de survol sur une image, un tableau ou une ligne

Je vous propose 8 effets de survols pour vos images, mais pas seulement.
Ces effets peuvent très bien se placer sur un tableau, sur une colonne ou encore sur une ligne d'e-monsite.


Ces effets se présentent sous 2 languages : du HTML et du CSS.
 
Pour que ces effets fonctionnent, il faut ajouter un code CSS dans la partie Configuration -> Apparence -> Modifier/Ajouter du code CSS au thème.
Une fois que votre code CSS est mis en place, vous pouvez rajouter le nom de votre Class dans votre éditeur HTML.

 Les effets proposés sont : ZOOM - DEZOOM - FLASH - ROTATE-ZOOM-OUT - ROTATE - ROUNDED - GRAYSCALE - GRAYSCALE2 

 

Effets sur une image

Effets de zoom/dezoom :

Paysage  Paysage 

Effets Noir et Blanc (grayscale1&2), Flash :

Bebe  Bebe  Bebe         

Effets de Rotation ou de forme arrondi (rounded):

Animaux      Animaux     Animaux 

 

Effet sur une colonne

Ceci est une colonne

Paysage
*zoom

Ceci est une colonne

Bebe
*dezoom

Ceci est une colonne

Animaux
*rounded

Effet sur une ligne

Ceci est une ligne

Paysage  Bebe  Animaux
*rotate-zoom-out

Effet sur un tableau

Tableau n°1

Colonne Colonne
Ligne 2 Ligne 2
Ligne 3 Ligne 3

*zoom

 

Tableau n°2

Paysage

Ceci est un tableau

*grayscale2

 


N°1 : La mise en place du code CSS

Chaque effets possèdent un code. Ces codes sont à insérer dans la partie CSS d'E-monsite : Configuration -> Apparence -> Modifier/Ajouter du code CSS 

Modifier ajouter du code css au theme
Vous pouvez copier/coller les codes ci-dessous :

Effet zoom

Paysage

code :

/* zoom */ 
.zoom {transition: all 0.3s ease-in-out; }
.zoom:hover { transform: scale(1.1); }

 

Effet dezoom

Paysage
code :

/* dezoom */  
.dezoom {transition: all 0.3s ease-in-out; }
.dezoom:hover { transform: scale(0.9); }

 

Effet rounded

Paysage

code :

/* Image ronde */
.rounded {transition: all 0.3s ease-in-out;
   width: 200px; /* largeur de l'image */
  height: auto;
  }
.rounded:hover {border-radius: 50%; 
   width: 150px; /* on affiche l'image au carré */
  height: 150px;
  }

 

Effet grayscale

Paysage

code :

 /* Effet Noir et blanc */
.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.grayscale:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

 

Effet grayscale2

Paysage
code :

/* Effet Noir et blanc au survol */
.grayscale2 {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.grayscale2:hover {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

 

Effet flash

Paysage

code :

/* Flash */

.flash:hover {opacity: 1; animation: flash 1.5s; }
@-webkit-keyframes flash {0% {opacity: .4; }
100% {opacity: 1; }
}
@keyframes flash {0% {opacity: .4; }
100% {opacity: 1; }
}

 

Effet rotate

Paysage

code :

 /* Effet rotation*/

.rotate {transition: all 0.5s ease; }
.rotate {transform: rotate(-15deg); }

 

Effet rotate-zoom-out

Paysage
code :

/* Effet rotation #2 */

.rotate-zoom-out {transition: all .4s ease-in-out; transform: rotate(10deg) scale(1.1); }
.rotate-zoom-out:hover {transform: rotate(0deg) scale(0.9); }

 

 

N°2 : La mise en place dans l'éditeur de texte

 Mettre un effet sur une image :  

A ) Ajouter votre image dans l'éditeur de texte en cliquant sur le petit icône image.
Faire ensuite un clic droit sur l'image et sélectionner Propriétés de l'image.

Propriete de l image


 

 

 

 

*Vous pouvez combiné plusieurs effet à la fois.
Insérer les class séparé par un espace.


Exemple, j'ai combiné le dezoom grayscale2 rounded :
Animaux


 

 

B ) Dans la fenêtre qui vient de s'ouvrir, cliquer sur Avancé et insérer votre class (le nom de l'effet voulu). (zoom, dezoom, flash, grayscale, grayscale2, rounded, rotate ou rotate-zoom-out).

Propriete de l image2

 

  Mettre un effet sur une colonne :

A ) Pour mettre un effet sur une colonne, cliquer sur le petit icône Préférences 

Preferences

B ) Puis cliquer sur Avancé et mettre le nom de votre class.

Apparence des colonnes

 

 

Colonne en zoom

AnimauxBebe

  Mettre un effet sur une ligne :

Ajouter simplement le nom de votre class en bas de la ligne :

Class


 

  Mettre un effet sur un tableau :

Dans votre éditeur de texte, cliquer sur le petit icône Tableau. Dans la fenêtre qui s'ouvre, cliquer sur Avancé, puis mettre le nom de votre Class dans la case Classes de style.

Propriete du tableau

Exemple :

Tableau Tableau
Tableau Tableau

 

Bonus ​​caché : Mettre un effet dans votre menu horizontal

Un petit bonus pour conclure ce tutoriel, en vous montrant comment mettre une class dans votre barre de menu en haut de votre site.
Passez votre souris sur le mot Accueil et vous verrez que la class DEZOOM est sur le mot.

1 ) Pour rajouter ces effets sur votre menu du haut, aller sur Configuration, Menus, puis sélectionner votre structure.
2 ) Cliquer sur Modifier votre menu horizontal.

Menu

 

3 ) Pour mettre l'effet sur le mot Accueil, cliquer sur la ligne Modifier du mot accueil.

Menu modifier

4 ) Mettre le nom de votre Class dans la case destinée.

Menu class

Retour   Accueil   

 

Ajouter un commentaire