Comme le titre l'indique déjà, vous trouverez ici une collection composée de 10 incroyables CSS élégant effets :

2. Effet de survol sensible à la direction

Cet incroyable effet CSS3 vous aidera à obtenir un résultat unique. Lorsque vous survolez les éléments de la page, l'effet commence à suivre le pointeur, créant un incroyable effet 3D :

3. Effet de survol Wacom

Malgré le fait que cet effet puisse à juste titre être considéré comme le plus courant, il est toujours capable d'attirer l'attention :

4. Effets de survol CSS3

Si vous avez besoin d'effets circulaires dans le code CSS3, alors vous êtes arrivé à bon endroit! Il y en a jusqu'à 12 ici !

5. Animation de survol d'UNIQLO

Un autre intéressant Effet CSS en survol, ce qui vous permettra de créer des vignettes incroyablement attrayantes ou de décorer n'importe quelle image :

6. Effets de survol des boutons

Nous attirons votre attention sur plusieurs effets au survol des boutons. Tous sont assez attrayants et sont idéaux pour les sites de tout type :

7. 10 superbes effets de survol

Un autre ensemble composé de 10 effets CSS3 différents. La plupart d'entre eux sont très impressionnants :

8. Effets de survol CSS3 2

Cette collection comprend quatre effets de survol différents. Image CSS. Chaque effet révèle un titre et une description :

9. Rebondir en survol

Un effet amusant et intéressant au survol des images. Il convient bien pour une section d'avis ou une liste d'employés avec leurs photos :

10. Survols 8 bits

Un effet style vintage qui vous rappellera définitivement le passé !

11. Effet de survol de titre simple

Malgré son nom, ce n’est pas un simple effet. Il affiche les titres et modifie légèrement le niveau de transparence au survol :

12. Effet rabattable

Un autre effet CSS simple mais très attrayant. Lorsque vous passez votre souris sur une image, celle-ci se retourne, révélant le titre et la description à l'utilisateur :

13. Prix de curiosité

Tant que vous ne passerez pas votre curseur sur l’image, vous ne comprendrez pas la beauté de l’effet. Des lignes aléatoires s'alignent instantanément pour former un logo, qui est immédiatement décoré de couleur :

14. Effet de survol de l'image

Je dois admettre que c'est l'effet de survol CSS le plus intéressant en survol. C'est incroyable comme une image en révèle une autre !

15. Animation de survol

Un effet très simple qui parvient quand même à impressionner. Le passage du curseur sur l'image provoque une légère modification du niveau de transparence et déplace le focus sur le lien :

16. Passez-moi mon frère

Ce n’est peut-être pas l’effet le plus pratique, mais c’est certainement amusant ! Passez la souris sur les lunettes de soleil et la magie commence !

17. Effets de survol Nautilus SCSS HAML

Vous devriez absolument essayer chacun d’eux, car ils contribueront tous à rendre vos images uniques !

18. Effet de survol de la bordure SVG 1

Cet effet CSS de survol unique est idéal pour le texte, les boutons ou les images :

19. Icône de carte de recherche survolée

Vous ne savez pas comment décorer vos icônes de recherche ou de carte ? Alors c'est la solution pour vous ! Des transformations en douceur plaira à tous les yeux :

20. Volet d'icônes sociales

L'effet est idéal pour cacher les boutons réseaux sociaux, qui s'affichera uniquement lorsque vous passerez le curseur :

21. Informations sur les ajouts d'articles au produit

Cet effet CSS vous aidera à afficher Informations Complémentairesà propos des produits de la boutique en ligne :

22. Enveloppe animée

Un effet de survol parfait pour la section contact. Cette enveloppe animée affiche coordonnées sur la propagation. Mais cela ne se produit qu'après avoir survolé le curseur :

23. Retour en haut

Un effet de survol unique qui vous permet de remplacer le bouton « Haut » traditionnel par un bouton animé :

24. Survol fantaisie

Deux effets sont présentés ici. En plus d'agrandir l'image, l'effet modifie également la zone d'affichage lorsque vous survolez l'image :

25. Effet de survol de l'icône de rappels

Cet effet CSS pour le site a été inspiré d'une vidéo dédiée à OS X Yosemite :

26. Survol de l'image en cercle

Un autre effet rond applicable aux images circulaires. Il existe quatre styles de survol différents disponibles ici :

27. Effet de survol de l'icône Safari

Cet effet est une recréation de l'animation de l'icône Navigateur Safari. Vous pouvez facilement remplacer l'icône par votre propre image ou logo.

Tout d’abord, pour ceux qui ne sont pas encore complètement dans le sujet ou pas du tout dans le sujet, je vais vous expliquer brièvement de quoi il s’agit. Ce différents types effets (légendes contextuelles, info-bulles, transitions fluides, transformation, rotation, agrandissement, déplacement, etc., etc.) appliqués aux éléments du site Web lorsque vous passez le curseur de la souris sur eux. Ces effets peuvent être obtenus en utilisant soit divers plugins jQuery et pur .
Aujourd'hui, j'ai préparé grand choix effets de survol originaux pour les images créées avec en utilisant CSS 3, sans connecter les bibliothèques javascript. À propos des avantages et des inconvénients de la mise en œuvre des effets de survol sur CSS pur 3 Je ne le ferai pas, c'est un autre sujet, regardez simplement les exemples, et si nécessaire, utilisez celui que vous aimez sur votre site internet. Tous les effets présentés dans la revue sont fournis avec un exemple de démonstration et une documentation détaillée avec les codes sources. Les manuels sont pour la plupart en langage bourgeois, mais tout est plus ou moins intuitif.

Je voudrais immédiatement attirer votre attention sur le fait que tous ces exemples ne fonctionneront correctement que dans navigateurs modernes, qui prennent en charge les propriétés CSS3.

Afin de ne pas gâcher l'image globale, je n'ai pas déformé les noms des effets avec la traduction automatique (à l'exception de certains), j'ai laissé les titres originaux tels que les appelait le développeur.

Un effet très intéressant au survol des vignettes d'images en utilisant ridules en design et typographie. Plusieurs types d'effets différents pour l'apparence des légendes d'images, des transformations 3D douces et non intrusives et des transitions fluides de pseudo-éléments. Fonctionne uniquement dans les navigateurs modernes.

iHover est une collection impressionnante d'effets de survol CSS3 purs, avec prise en charge de Bootstrap 3. S css(fichier), facilement modifiable par des variables. Le code est modulaire, il n'est pas nécessaire d'inclure l'intégralité du fichier. Plus de 30 effets différents dans un seul package. Tout est plutôt bien documenté et les effets sont très simples à utiliser. Tout ce que vous avez à faire est de créer correctement le balisage HTML et de vous connecter Fichier CSS travailler.

Crée des effets de survol simples mais élégants pour les légendes d'images. L'idée est que lorsque vous survolez les vignettes, l'en-tête, le nom de l'auteur et les boutons de contact apparaissent. Pour certains effets, des transformations visuelles 3D sont utilisées.

Un effet de transition très simple, sans cloches ni sifflets particuliers, complètement image ronde dans un cadre, se transforme en changeant de focus en survol et c'est tout.

Effets de survol pour les vignettes à l'aide de CSS3

Le développeur positionne son travail comme un exemple de galerie d'images avec des effets de transition lorsque des annotations (légendes) apparaissent sur les vignettes. Une prise en charge fiable par les navigateurs modernes, y compris IE 9+, est déclarée. Bien sûr, il est difficile de qualifier cela de galerie à part entière, mais l’effet de l’apparition des signatures est assez intéressant.

Série suivante Règles CSS, pour créer des effets de transformation impressionnants lorsque vous survolez des vignettes parfaitement rondes. Le package contient 7 types de transitions CSS3, une documentation très détaillée sur la configuration et l'utilisation. Les effets sont pris en charge par tous les navigateurs modernes.

Faire pivoter les vignettes au survol

Un simple effet de rotation des vignettes rondes lorsque vous passez le curseur de la souris dessus, à peu près le même que vous pouvez voir sur mon blog, dans les annonces d'articles sur la page principale. Implémenté avec quelques lignes de code CSS.

Pour le traduire littéralement : « Effet sexuel au survol ». Bien sûr, il est peu probable que vous remarquiez quelque chose d'aussi sexy dans cet effet, à moins d'avoir une imagination débordante, mais l'effet est intéressant à sa manière et mérite qu'on y prête attention.

Cinq effets différents pour les images lorsque vous les survolez. Signatures contextuelles dans trois variantes, rideaux sous forme de modification du degré de transparence et de rotation avec mouvement horizontal.

4 Types d'effets d'animation pour les légendes d'images, implémentés exclusivement en CSS3. Différentes positions d'apparition et effets de transition, un design assez standard. Pour comprendre le fonctionnement de l'animation, jetez un œil à code source Je n'ai trouvé aucune page de démonstration ni documentation séparée.

Galeries de vignettes disposées en grille avec divers effets pour l'apparition des signatures, la rotation, le développement, le pop-up, etc. La documentation sur l'utilisation et la configuration est assez rare, mais si vous le souhaitez vraiment, vous pouvez la découvrir.

Cet effet n'a rien de spécial, un changement banal de la luminosité des images au survol, sauf que des éléments d'animation ont été ajoutés. Vous devrez comprendre vous-même les détails de l’implémentation en présentant le code source de la démo.

Un autre ensemble de 10 effets de survol pour les images, diverses modifications des vignettes lors du survol, agrandissement, rotation, rotation, gradation, etc.

Divers effets d'animation d'images autour des images semblent très attrayants, il existe un manuel détaillé pour leur configuration et leur utilisation.

Effets de survol CSS3 originaux utilisés pour l'apparence efficace des légendes des vignettes d'image lors du survol. Le jeu de règles CSS comprend 10 effets différents que vous pouvez utiliser individuellement pour différentes images. Les effets sont vraiment impressionnants, d’autant plus que tout a été réalisé en utilisant CSS3. Guide détaillé, vous aidera à comprendre de quoi il s'agit.

L'idée est de créer un SVG qui est une forme d'arrière-plan pour du texte et qui se transforme en une autre forme au survol de la souris. De cette façon, vous pouvez en faire plusieurs différentes options, dans l'exemple, trois types d'effets de transition sont présentés. Dignité en utilisant SVG est que nous pouvons redimensionner le formulaire pour qu'il corresponde à la taille du conteneur parent.

Images coulissantes

L'essentiel cet effet c'est que l'image est déplacée de haut en bas pour révéler la légende. Si vous travaillez avec les paramètres de style, je pense que vous pouvez obtenir des effets plutôt sympas, mais par défaut, tout semble très simple.

Avec cet effet tout est simple, les légendes des images glissent en haut à droite ou en bas à gauche, sous forme d'un ruban avec une bande translucide. fond sombre, tout est reformaté très simplement à l'aide des propriétés CSS.

Une solution intéressante : les vignettes sont présentées sous une forme assombrie ; lorsque vous les survolez, les images apparaissent et la signature apparaît sur un fond clair.

La légende de l'image apparaît depuis le coin et s'étend en diagonale sur toute la zone de l'image.

Encore quelques solutions intéressantes pour implémenter des légendes contextuelles pour les vignettes d'images. Dans l'éditeur en ligne, vous pouvez expérimenter les paramètres et obtenir des résultats plus impressionnants.

Trousse beaux effets lorsque vous survolez les vignettes, différents types d'apparence et de conception des légendes des images. Des lignes fines contrastant avec un fond légèrement sombre créent des blocs d'informations faciles à lire.

Formes bizarres et effet grossissant combinés à effet d'animation l'apparition des légendes des vignettes d'images.

Merveilleux effets de superposition d’icônes sur les vignettes d’images dans diverses variations d’apparence. L'exemple utilise un symbole (+) entouré d'un cercle utilisant border-radius : en CSS, vous pouvez également utiliser des polices d'icônes pour rendre le panneau contextuel plus informatif.

Un exemple de création d'un effet de diapositive visuel pour afficher des légendes 3D pour des images en utilisant uniquement CSS3 et HTML5.

6 Légendes des photos

6 Options pour l'apparition des légendes d'images pop-up au survol en utilisant CSS3. Leçon détaillée sur l'implémentation et la configuration, sources disponibles en téléchargement.

Et enfin, au final, je ne peux m'empêcher de mentionner le moyen le plus simple de créer une légende contextuelle pour une vignette en utilisant CSS3.

De l'auteur : plusieurs leçons sur la création d'effets de survol en CSS pur, liés à la direction du curseur. Les cours sont destinés à ceux qui ont au moins connaissances de base HTML et connaissance avancée de CSS/SASS.

Clause de non-responsabilité

Les effets ne fonctionnent pas dans les anciens navigateurs ; ils nécessitent un navigateur capable de restituer des transformations 3D. J'ai testé les effets dans dernières versions Navigateurs Chrome, Firefox et Safari.

J'utilise également la merveilleuse bibliothèque AutoPrefixer pour remplacer automatiquement les préfixes des fournisseurs. Accédez aux paramètres de CodePen sur Onglet CSS et sélectionnez Préfixe automatique.

Effet de survol avec parallaxe

Introduction

Mon designer et moi sommes tombés sur page d'accueil site Festival Kikk en 2015, il a implémenté des cartes avec un effet de parallaxe au survol du curseur. Nous l'avons aimé et avons voulu recréer cet effet dans notre projet. Cependant, en raison de la nature du code, nous ne pouvions pas utiliser JS. J'ai commencé à chercher des solutions CSS pures et j'ai trouvé quelque chose d'intéressant.

Tilde tout-puissant

L'un de mes sélecteurs préférés en CSS est le tilde (~), qui sélectionne l'élément le plus proche correspondant au sélecteur mais situé après le premier élément. Par exemple, ul ~p sélectionnera p éléments dans le code ci-dessous :

< div > < ul > < / ul > < ol > < / ol > < p > < / p > < p > < / p > < / div >

J'ai réalisé que cela pouvait être utilisé pour créer des effets de survol basés sur la direction du curseur pour presque tout !

Structure

La structure des liens est assez simple : un conteneur avec un ensemble de balises et un conteneur pour le contenu de la carte. Tous les attributs href doivent avoir la même URL.

Contenu

< div class = "container" > < a href = "http://gabriellew.ee" > < / a > < a href = "http://gabriellew.ee" > < / a > < a href = "http://gabriellew.ee" > < / a > < a href = "http://gabriellew.ee" > < / a > < div class = "card" > < h1 >Contenu< / h1 > < / div > < / div >

Ajoutons du SASS/CSS pour positionner tous les liens dans les coins de la carte. Vous pourriez créer plus de liens, mais par souci de simplicité, nous en prendrons quatre. Pour accélérer le processus, nous utiliserons Haml.

Puisque nous n'avons pas JS pour nous alerter de la direction du mouvement de la souris et de la position du curseur, nous utiliserons des liens pour diviser la carte en zones de détection. Si par exemple le curseur arrive sur un lien Le n°1 est en haut, puis la souris entre dans la zone de détection n°1 avant d'entrer dans le n°3 et le n°4.

effet de survol

a ( &:hover, &:focus ( ~ .card ( // Code CSS ) ) )

& : survol , & : focus ( ~ . carte ( //Code CSS

La carte changera lorsque vous survolerez un lien, contrairement au sélecteur +, qui sélectionne uniquement les éléments adjacents proches.

Transformations

Les coins sont définis correctement, nous allons maintenant ajouter des transformations qui inclineront la carte au niveau des coins. La première étape consiste à ajouter une perspective au conteneur. J'utilise généralement quelque chose d'environ 1000 pixels pour pouvoir montrer une légère profondeur.

Pour une parallaxe de ce type, le plus propriété importante il n'y aura pas de transformation, mais une transformation-origine superposée à la carte. Il doit être modifié pour toutes les zones de détection et attribué au coin opposé à la zone de détection actuelle.

Par exemple, si nous entrons dans la zone de détection n°1 (en haut à gauche), l'origine de la transformation doit être en bas à droite, c'est-à-dire coin opposé. L’essentiel est le suivant : le coin concerné doit s’éloigner de nous et les coins restants doivent se rapprocher de nous.

Touches finales

Pour compléter notre effet de parallaxe, ajoutons un cadre à la carte, qui se pliera également lorsque vous survolerez le lien. Cette technique peut être appliquée à d’autres éléments de la carte.

// border styles.card ( position : relative ; .border ( transform-origin : centre centre ; position : absolue ; haut : 12px ; gauche : 12px ; largeur : calc(100% - 24px) ; hauteur : calc(100% - 24px); border: 2px solid white; ) ) // effet de parallaxe.container ( a ( &:hover, &:focus ( ~ .card ( .border ( transform: translateZ(24px); ) ) ) // pousser le cadre revenez sur cliquez &:active ( ~ .card ( .border ( transform: none; ) ) ) ) )

// styles de cadre Carte ( position : relative ; Frontière ( transformation-origine : centre centre ; position : absolue ; haut : 12px ; gauche : 12px ; largeur : calc(100 % - 24 px) ; hauteur : calc(100 % - 24 px) ; bordure : 2px blanc uni ; // effet de parallaxe Conteneur ( & : survol , & : focus ( ~ . carte ( Frontière ( transformer : traduireZ(24px); // repousse le cadre en cliquant & : actif ( ~ . carte ( Frontière ( transformation : aucune ;

Il ne reste plus qu'à (1) ajouter une transition à la carte pour adoucir la transition dans les coins, et (2) supprimer les styles de liens afin qu'ils ne soient pas visibles. J'aime définir l'opacité à 0 pour éviter les incidents. Pour éviter les chevauchements dus aux rotations des cartes, je déplace également le lien survolé vers l'avant.

Résultat

Vous trouverez ci-dessous la version complète de l'effet de survol de parallaxe. CodeStylo. Cochez la case pour voir l'emplacement des liens. Pour améliorer l'effet de parallaxe, j'ai décidé d'ajouter quelques liens supplémentaires.

L'effet de survol en utilisant un cube comme exemple

Introduction

Natation simple adulte 2016 est un autre site avec un effet de survol impressionnant basé sur la direction du curseur. En cliquant sur l'icône du calendrier à gauche coin supérieur Un calendrier 3D s'ouvre, où chaque jour est présenté sous la forme d'un cube, qui tourne en fonction de la direction du curseur. Excellente idée !

J'ai immédiatement réalisé qu'un effet similaire pouvait être obtenu en utilisant le tilde. J'avais déjà une forme de cube que je pouvais facilement modifier pour les liens et les effets de survol de parallaxe.

Chaîne

Vous pouvez maintenant commencer à créer la base du cube avec des liens. Vous devez créer un conteneur extérieur, quatre triangles qui seront assemblés en un carré et un conteneur intérieur avec six éléments - quatre vides et deux avec du contenu. J'aime cet ordre : haut, bas, gauche, droite, devant, derrière.

< div class = "link" > < a href = "http://codepen.io/gabriellewee/"> < / a > < div >Contenu avant< / div > < div >Retour au contenu< / div > < / div > < / div >

Pour créer des liens triangulaires, vous pouvez utiliser Clippy. Pour la compatibilité avec Firefox, vous avez également besoin du chemin de clip SVG. Les liens doivent avoir une valeur translationZ positive (mis au premier plan), sinon ils se cacheront derrière le cube.

Pour définir la largeur, la hauteur et les transformations du cube, nous utilisons une variable d'une valeur de 12px. Pour différencier les côtés du cube, nous utilisons différentes nuances d'une même couleur pour simuler l'éclairage. Le verso est entièrement blanc.

Nous avons légèrement fait pivoter le cube pour que vous puissiez voir que tous les côtés sont correctement alignés. Si vous regardez la transformation, vous pouvez voir que tous les côtés du cube ont une valeur translationZ négative. Autrement dit, tous les côtés, sauf le devant, sont en arrière-plan.

La nature des transformations 3D est telle que si vous n'avancez pas tout le cube, une partie peut être coupée. arrière-plan. Vous pouvez avancer le cube pour ne pas avoir ce problème. Comme j'avais déjà un cube, je l'ai à peine touché. Écrivez dans les commentaires si vous rencontrez des difficultés pour créer un cube.

effet de survol

Ensuite, vous devez ajouter une rotation en survol. L'effet peut être stylé comme bon vous semble, mais la méthode la plus réaliste que j'ai trouvée est liée à la souris. Si la souris entre dans le cube par la gauche, le cube doit tourner de gauche à droite. Tous les virages doivent être de 180 degrés/0,5 tour ou équivalents négatifs. Nous ajouterons également une transition pour que le cube tourne correctement.

Polissage

Deux choses doivent être peaufinées :

Le triangle du bas retourne le texte arrière.

Le survol est trop sensible : la transition entre les triangles provoque des virages inutiles.

Avec du texte, le moyen le plus simple est de faire pivoter face arrièreà droite sans transitions en douceur au virage principal. Pour une raison quelconque, la modification du triangle du bas affecte également celui du haut. Par conséquent, nous devons ajouter une rotation supplémentaire pour les deux effets de survol.

La sensibilité des effets de survol était plus difficile à corriger. La solution est de faire en sorte que le lien actuel occupe tout l'espace des trois autres liens (pleine largeur/hauteur, supprimer le chemin de détourage, avancer), mais alors l'effet angulaire intéressant disparaît (lorsque vous déplacez rapidement la souris le long d'un courbe sur le cube). En fin de compte, j'ai résolu le problème - j'ai défini un délai de transition afin que le correctif ne fonctionne pas si le curseur sur le cube ne s'attardait pas plus d'une seconde. Le retard n'élimine pas tous les problèmes, mais il atténue la plupart de.

Résultat

Conclusion

Tellement effets intéressants le survol peut être créé à l'aide de tildes, de transformations et de transitions fluides. Mon designer a eu l'idée de créer un aquarium dans lequel les poissons nageraient dans la direction opposée au curseur. Vous pouvez créer un effet d'ondulation de l'eau, faire pivoter les images avec décalage et créer des animations avec flou de mouvement. Écrivez dans les commentaires si vous avez déjà utilisé cette technique !

Transition en douceur du monochrome à la couleur en survol à l'aide de jQuery.

3. Effet de survol en utilisant CSS et jQuery

L'effet de remplacement des photos lors du survol du curseur de la souris. Les photos sont présentées sous forme de sprites (plusieurs photos combinées en une seule).

4. Effet de survol animé

effet jQuery: L'élément est grisé jusqu'à ce que le curseur de la souris passe dessus. Excellente façon attirer l'attention du visiteur sur un élément de la page.

5. Changer l'image au survol de la souris à l'aide de jQuery

Un effet très intéressant. Lorsque vous passez le curseur de la souris, les images changent. Lorsque vous cliquez sur la souris, toutes les images changent simultanément.

6. Effet de survol animé CSS

Changez les images en survol. L'effet ne prend pas en charge IE.

7. Effet de survol utilisant des sprites CSS et jQuery

L'effet d'assombrir une image lorsque vous passez le curseur de la souris dessus. Des sprites CSS sont utilisés pour implémenter l'effet.

8. Plugin jQuery « jQueryZoom »

Avec ce plugin, vous pouvez ajouter un effet de zoom d'image au survol ou y ajouter une superposition. Le plugin est facile à personnaliser en fonction de vos besoins.

9. Changer les images en survol

Changez les images lorsque vous passez le curseur de la souris. Vous pouvez facilement trouver une utilisation pour ce plugin jQuery dans les magasins et catalogues en ligne.

10. Effet jQuery de changement de couleur fluide en survol

Lorsque vous passez votre souris sur un objet, vous pouvez modifier les couleurs d'une partie spécifique de la page.

11. Plugin jQuery « Zoom sur l'image »

Agrandit l'image lors du survol du curseur. Effet de proximité.

12. Animation de survol jQuery

Peut être utilisé pour implémenter la navigation. Effet d'animation en deux versions : avec ombre portée et avec réflexion.

13. Effet de survol jQuery «Effet Images Hover Cycle»

Les effets de survol donnent à n’importe quel site Web un aspect dynamique et vivant. Habituellement utilisé pour eux Code JavaScript, mais avec l'avènement de CSS3, vous ne pouvez déjà utiliser que des outils de style.

Donné dans ce matériel les effets fonctionnent dans les navigateurs modernes. La prise en charge d'IE dépend de la version et avant de postuler dans vrai projet des tests minutieux doivent être effectués.

Se branler

Cet effet fonctionne très bien lorsque vous avez plusieurs éléments alignés horizontalement. Déplacer le curseur de la souris le long d'une telle règle génère une onde.

C'est très facile à faire. Pour chaque élément, un champ est défini et lorsque vous passez le curseur de la souris, la taille du champ diminue. La valeur de marge initiale est de 15px, réduite à 2px, ce qui fait "rebondir" l'image. Cet effet peut également être utilisé pour le texte d'une liste.

La propriété de transition est utilisée ici en complément, car l'effet est superbe sans elle. Cela donne un effet lisse.

CSS

Ex1 img (bordure : 5 px solide #ccc ; float : gauche ; marge : 15 px ; -webkit-transition : marge de sortie facilitée de 0,5 s ; -moz-transition : marge de sortie facilitée de 0,5 s ; -o-transition : marge de 0,5s easy-out; ) .ex1 img:hover ( margin-top: 2px; )

Lorsque vous passez la souris sur chaque image, sa taille augmente lentement et lorsque vous perdez la mise au point, elle revient à sa taille d'origine.

Pour cet effet, un ensemble d'images mesurant 400x133 px est utilisé. Leur taille est ensuite réduite dans le code CSS à 300x100 px et développée au survol de la souris. Le centrage horizontal est utilisé et une image redimensionnée pourrait tout gâcher, c'est pourquoi une valeur de marge négative de la moitié de la largeur est appliquée.

CSS

#container (largeur : 300px ; marge : 0 auto; ) #ex2 img( hauteur : 100px; largeur : 300px; marge : 15px 0; -webkit-transition : facilité pour tous les 1 ; -moz-transition : facilité pour tous les 1 ; -o -transition : tous les 1 sont faciles ; ) #ex2 img:hover ( hauteur : 133 px ; largeur : 400 px ; marge gauche : -50px ; )

Cet effet est très similaire en utilisant Javascript, lorsque lorsque vous passez votre souris sur un objet, un autre apparaît. Pour y parvenir, l'image et le texte sont placés dans le même conteneur div, puis tout est décalé vers la gauche pour que les deux éléments soient au même niveau. Ensuite, nous appliquons les propriétés couleur: transparent Et hauteur de ligne : 0px Pour élément div. Cela place le texte en haut du div et le cache.

Pour faire apparaître le texte au survol de la souris, on change simplement la couleur et la hauteur du trait. Cela crée l'effet d'une manifestation de texte à l'échelle.

CSS

#ex3 (largeur : 730 px ; hauteur : 133 px ; hauteur de ligne : 0 px ; couleur : transparent ; taille de police : 50 px ; famille de polices : "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif ; transformation de texte : majuscule ; -webkit-transition : toute la facilité de 0,5 s ; -moz-transition : toute la facilité de 0,5 s ; img( float : gauche ; marge : 0 15px ; )

C'est l'un des effets les plus simples mais très intéressants pour une galerie de miniatures. Il est basé sur la création d’un tableau d’images et la rotation de l’image sur laquelle se trouve le curseur de la souris.

Pour cet effet, de nombreuses nouveautés, spécifiques à navigateur spécifique Propriétés CSS, cela ne fonctionnera donc pas dans les anciens navigateurs. La galerie utilise des ombres, des transitions et des transformations.

Si vous souhaitez diversifier davantage l'effet, vous pouvez utiliser des pseudo-sélecteurs pour faire pivoter les images sous différents angles et dans différentes directions.

CSS

#ex4 ( largeur : 800px ; marge : 0 auto ; ) #ex4 img ( marge : 20px ; bordure : 5px solid #eee; -webkit-box-shadow : 4px 4px 4px rgba(0,0,0,0.2); - moz-box-shadow : 4px 4px 4px rgba(0,0,0,0.2) ; box-shadow : 4px 4px 4px rgba(0,0,0,0.2) ; -moz-transition : toutes les facilités de 0,5 s ; -o-transition : toutes les facilités de 0,5 s ; o-transformation : rotation (-7 deg );

C'est un effet merveilleux et complexe. Initialement, les images ont une légère transparence. Puis, lorsque le curseur de la souris passe dessus, la transparence est complètement supprimée, et une lueur autour d'elle ainsi qu'un reflet apparaissent (pour les navigateurs Webkit uniquement).

CSS

#ex5 (largeur : 700 px ; marge : 0 auto ; hauteur min : 300 px ; ) #ex5 img ( marge : 25 px ; opacité : 0,8 ; bordure : 10 px solide #eee ; /*Transformation*/ -webkit-transition : tous 0,5 s facilité ; -moz-transition : toutes les facilités de 0,5 s ; -o-transition : toutes les facilités de 0,5 s /*Reflection*/ -webkit-box-reflect : en dessous de 0px -webkit-gradient(linéaire, haut gauche, bas gauche, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)) ) #ex5 img:hover ( opacité : 1; /*Reflection*/ -webkit-box -reflect : en dessous de 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); webkit-box-shadow : 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow : 0px 0px 20px rgba(255,255,255,0.8);

Conclusion

Les cinq effets présentés ne sont qu'un petit exemple de ce que vous pouvez faire avec CSS. N'ayez pas peur d'expérimenter. Se combiner les uns avec les autres éléments simples vous pouvez obtenir des résultats impressionnants.