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 Ideas-1
 
 
 
    Imprimer la page...
    Imprimer la section...

Images avec Hover Effects Ideas-1

Des images avec Hover Effects Ideas

Les 30 propositions de ces trois pages sont de Mary Louon peut les trouver sur ce site

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

Les images présentées sont libres de droits et issues de ce site : https://unsplash.com/

J'ai essayé de me rapprocher le plus fidèlement possible de ces propositions en adaptant et simplifiant quelquefois le code. Ces propositions ne sont pas vraiment "responsives" car, si l'image s'adapte bien, pour la police, ici, il n'y a pas de solution miracle. La plupart du temps, l'unité utilisée est rem (Il aurait été possible d'utiliser une unité proportionnelle vw à la largeur de l'affichage de la page : Information trouvée ici. Mais sur un écran de smartphone, cela ne convient plus... )

La première série montre 12 effets, classés par ordre alphabétique. La seconde série les 12 effets suivants et la troisième série, 6 effets supplémentaires faisant appel à une police d'icônes.

Le dossier contenant toutes les images de ce tutoriel et la police d'icônes est téléchargeable ici.

01-apollo

Effect Apollo

Voici un paragraphe qui peut contenir un lien... etc...

02-bubba

Effect Bubba

Voici un paragraphe qui peut contenir un lien... etc...

03-chico

Effect Chico

Voici un paragraphe qui peut contenir un lien... etc...

04-dexter

Effect Dexter

Voici un paragraphe qui peut contenir un lien... etc...

05-duke

Effect Duke

Voici un paragraphe qui peut contenir un lien... etc...

06-goliath

Effect Goliath

Voici un paragraphe qui peut contenir un lien... etc...

07-honey

Effect Honey

Voici un paragraphe qui peut contenir un lien... etc...

08-jazz

Effect Jazz

Voici un paragraphe qui peut contenir un lien... etc...

09-julia

Effect Julia

Voici 3 paragraphes

avec une arrivée

progressive

10-layla

Effect Layla

Voici un paragraphe qui peut contenir un lien... etc...

11-lexi

Effect Lexi

Voici un paragraphe qui peut contenir un lien... etc...

12-lily

Effect Lily

Voici un paragraphe qui peut contenir un lien... etc...

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, le code est assez simple (voir cependant l'Effect Julia où il y a, dans l'exemple 3 paragraphes. Il faut placer toutes les parties <figure class="effect-xxxx">...</figure> dans un <div class="grid">...</div>.

Les parties surlignées en blanc sont à adapter évidemment à vos besoins. Toutes les images 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.


Date de création : 18/11/2018 @ 09:22
Catégorie : Astuces - Changements au survol
Page lue 5130 fois


Réactions à cet article


Réaction n°1 

par cdombo le 19/11/2018 @ 22:35

salut JeanDenis....

heu comment dire ..... j'adore !

tu nous gattes !

bref, merci

cdom


Bonjour,

Merci pour ce commentaire.

Cordialement,

Jean-Denis