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

Images avec Hover Effects Ideas-2

Des images avec Hover Effects Ideas

Voici la suite 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 seconde série présente les 12 effets suivants classés dans l'ordre alphabétique.

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

13-marley

Effect Marley

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

14-milo

Effect Milo

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

15-ming

Effect Ming

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

16-moses

Effect Moses

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

17-oscar

Effect Oscar

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

18-romeo

Effect Romeo

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

19-roxy

Effect Roxy

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

20-ruby

Effect Ruby

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

21-sadie

Effect Sadie

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

22-sarah

Effect Sarah

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

23-selena

Effect Selena

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

24-steve

Effect Steve

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

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.

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 et 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>.

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:23
Catégorie : Astuces - Changements au survol
Page lue 4899 fois


Réactions à cet article


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