Images avec Hover Effects Ideas-3
Des images avec Hover Effects Ideas
Voici la fin des 30 propositions de Mary Lou, que l'on peut trouver sur ce site
rappel : info licence : https://tympanus.net/codrops/licensing/ et images libres de droits : https://unsplash.com/
J'ai essayé de me rapprocher le plus fidèlement possible de ces propositions en adaptant et simplifiant quelquefois le code.
Cette troisième série présente les 6 derniers effets classés dans l'ordre alphabétique, mais qui utilisent une police d'icônes (Font Awesome : https://fontawesome.com/?from=io ) et pour deux effets une image vectorielle. Le dossier contenant toutes les images de ce tutoriel et la police d'icônes est téléchargeable ici. En explorant la table des caractères de cette police et le fichier de style font-awesome.css, vous pourrez choisir et inclure les icônes qui vous conviennent.
Les codes utilisés sont ci-dessous.
Le contenu du premier onglet : Style commun (strictement le même qu'à la page précédente) est obligatoire, soit au début du code source de l'article ou de la boite libre, soit dans styleplus.css. Mais il faut ajouter un lien vers la police d'icônes au tout début du code source de l'article ainsi, avec un chemin à adapter à votre configuration :
<link href="img/HoverEffectImg/font-awesome-4.2.0/css/font-awesome.css" rel="stylesheet" type="text/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.
Pour les effets Phoebe et Winston, le code du style appelle des images vectorielles, il faut adapter les chemins à votre configuration.
Dans les codes du corps de l'article ci-dessus, le code est structuré de la même manière que la page précédente. Il faut placer toutes les parties <figure class="effect-xxxx">...</figure> dans un <div class="grid">...</div>.
Cependant, il y a les appels aux icônes... Là c'est un peu délicat car cet appel est dans une classe
<i class="fa fa-fw fa-download"></i> par exemple...
mais le greffon htmlpurifier de Guppy supprime manifestement ces balises, si le contenu est vide... Il faut donc "tricher" et intégrer un caractère vide au clavier ou en le copiant-collant (j'en ai trouvé 4 qui fonctionnent indifféremment : Alt+0127 Alt+0129 Alt+0141 Alt+0157)
Vous pouvez voir à quoi ils ressemblent en affichant le code source de cet article. Mais pour les besoins de ce tutoriel j'ai mis le caractère @ (n'oubliez donc pas de le remplacer par un caractère vide si vous copiez-collez mon code...)
Les parties surlignées en blanc sont à adapter évidemment à vos besoins. Toutes les images, ainsi que la police d'icônes sont dans un dossier HoverEffectImg placé dans le dossier img à la racine de GuppY. Il faut évidemment adapter les sources à votre configuration. Il est très simple d'inclure dans les titres ou les paragraphes : des images, des liens directement dans l'éditeur de GuppY en se servant des outils habituels.
Dans le style commun, pour les classes grid et figure il conviendra d'adapter les dimensions à votre convenance, et notamment les pourcentages ainsi que le min-width afin que les images ne soient pas inférieures à 300px par exemple pour les smartphones. Les valeurs dans les effets seront donc à adapter.
ATTENTION : Sur les écrans tactiles, smartphones, tablettes... l'effet de survol, évidemment ne fonctionne pas et il faut "cliquer" pour déclencher l'effet.
Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.
Catégorie : Astuces - Changements au survol
Page lue 84689 fois