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 Circle Hover Effects
 
 
 
    Imprimer la page...
    Imprimer la section...

Images avec Circle Hover Effects

Des images circulaires qui changent lors du survol de la souris avec des effets variés

Ces 7 propositions ci-dessous sont issues de ce site (auteur : Mary Lou)

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

Tout est téléchargeable sur le site. Je me suis juste contenté de jouer avec et de modifier à la marge les propositions. J'ai fait en sorte que les différents effets puissent tous s'afficher sur une même page. J'ai quelquefois simplifié l'effet et j'ai modifié l'ordre des présentations... et leur numéro. L'appel des images s'effectue dans le code du corps de l'article, et non dans le style comme dans les modèles. Cela a donc nécessité une réécriture partielle du code de style css.

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 à chaque effet en adaptant les contenus, bien sûr.

Dans les codes du corps de l'article ci-dessus, seules les lignes surlignées en vert sont obligatoires. Les lignes surlignées en jaune  ou en orange ne servent qu'à placer les images de ce tutoriel dans le flux ou à les faire retourner à la ligne. Les parties surlignées en blanc sont à adapter évidemment à vos besoins. Mes images, ici, font toutes 220px de côtés et sont dans un dossier images placé dans le dossier img à la racine de GuppY. Il faut évidemment adapter les sources à votre configuration. Notez que pour chaque effet, la partie <li>...</li> est différente, l'appel à l'image peut avoir lieu deux fois, et que pour les effets ¤4 et ¤6, il y a un z-index (empilement des images) à renseigner : mettre des valeurs supérieures à 0. L'image qui doit apparaitre au dessus doit avoir un z-index plus élevé que celui d'une image au dessous.

Dans le code simplifié, je n'ai placé que l'essentiel afin de ranger simplement les images dans le même flux, elles seront centrées dans la page automatiquement. Je n'ai pas détaillé le contenu dans les class="chX-item". C'est juste pour montrer l'enchainement le plus simple.

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

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 : 09/09/2018 @ 19:20
Catégorie : Astuces - Changements au survol
Page lue 82999 fois


Réactions à cet article


Personne n'a encore laissé de commentaire.
Soyez donc le premier !