8 effets CSS au survol sur les miniatures

Les miniatures font partie intégrante d’un design web, et souvent un bon effet de survol peut venir renforcer l’expérience utilisateur, qu’il s’agisse d’un site de présentation, d’un portfolio, ou d’un site ecommerce.

Voici une compilation de quelques effets sympa à mettre en place sur vos prochains projets ! (Perso j’adore le n° 8 !)

Différents effets au survol pour monter/cacher du texte

 

Contour de l’image au survol :

Au survol, un contour apparait autour de l’image, et peut bien coller à un web design dans la même thématique

Liens de partage sur les réseaux sociaux :

Au survol les boutons de réseaux sociaux apparaissent

Effet au survol avec apparition de texte

 

Grille en Flexbox dans le même style que youtube :

Grâce à la grille flexbox, votre galerie est responsive et l’effet de survol invite à jouer la vidéo

 

Masque en diagonal au survol :

Miniatures circulaires pour portfolio :

Un effet d’apparition sympa pour les miniatures, qui passent d’une forme ronde à rectangulaire :

 

Miniatures avec effet de zoom et flou :

Cet effet est plutôt sympa visuellement, accentuant l’effet 3d en zoomant légèrement sur l’élément survolé et floutant les autres éléments

mike

mike

Chef de projet web, Mike assure la réussite de projets digitaux depuis 2011. Son but est d'aider les webmasters et les freelances à tirer le meilleur des outils comme WordPress, WooCommerce et Elementor. Sur ce blog il partage son expérience, ses astuces et les pépites dénichées sur le web. Côté pro, Mike adore apprendre de nouveaux trucs et faire progresser les autres, et côté perso les afters, faire des shoots de baskets et les films d'horreur. La légende raconte qu'avec un mojito il vous accordera +4xp de confiance

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Thématiques

Vous recherchez des astuces dans un secteur donné ? Vous pouvez accéder directement à la catégorie qui vous intéresse !