TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

11 effets de survol d’images CSS pour Weebly

539

Dans notre article précédent, nous avons vu comment créer des superpositions d’images lors du survol et dans cet article, nous verrons comment créer des effets de survol d’images simples pour votre site Weebly. Les propriétés CSS de transition, de transformation, de filtrage et d’opacité sont utilisées pour créer un effet de survol pour les images sur le site Weebly. Vous pouvez soit copier/coller le code complet du widget dans l’élément « Embed Code » ou ajouter le style CSS dans la section « Header Code » et le code HTML dans l’ élément « Incorporer le code » sur la page.

Effets de survol d’images CSS pour Weebly

Il y a 11 effets différents à contrôler: zoom arrière, zoom avant, agrandissement, réduction, saturation, contraste, luminosité, niveaux de gris, flou, inversion des couleurs et opacité. Le code CSS et HTML complet ainsi que la démo pour chaque style sont présentés ci-dessous.

  • Assurez-vous de remplacer l’URL de l’image par votre propre URL de l’image. Vous pouvez soit télécharger des images dans la section « Actifs », soit utiliser des URL de différentes pages de votre site Weebly ou utiliser des URL d’un autre site.
  • Vous pouvez modifier les valeurs d’échelle, de niveaux de gris, de luminosité, de contraste, etc. avec vos propres valeurs. Par exemple, « -webkit-filter : luminosité (0,25 ); » réduira la luminosité à 25 % que vous pouvez modifier en « -webkit-filter : luminosité (1,25 ); » pour augmenter la luminosité à 125%.
  • La propriété de filtre n’est pas prise en charge dans Internet Explorer.

Voici un code complet pour chaque type d’effet de survol d’image. Vous pouvez afficher l’aperçu en passant la souris sur l’image.

1 Zoom avant sur l’image au survol

<style> .cont1 { overflow:hidden; } .cont1:hover .image1 { -webkit-transform:scale(1); transform:scale(1); } .image1 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; border-radius: 15px; -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <div class="cont1"> <img class="image1" src="Image-URL"> </div>

2 Zoom arrière sur l’image en survol

<style> .cont2 { overflow:hidden; } .cont2:hover .image2 { -webkit-transform:scale(1); transform:scale(1); } .image2 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; border-radius: 15px; -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <div class="cont2"> <img class="image2" src="Image-URL"> </div>

3 Agrandir la taille de l’image au survol

<style> .image3 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image3:hover { -webkit-transform:scale(1.3); transform:scale(1.3); } </style> <img class="image3" src="Image-URL">

4 Réduire la taille de l’image au survol

<style> .image4 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image4:hover { -webkit-transform:scale(0.7); transform:scale(0.7); } </style> <img class="image4" src="Image-URL">

5 Modifier la saturation des couleurs de l’image au survol

<style> .image5 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image5:hover { -webkit-filter: saturate(4); } </style> <img class="image5" src="Image-URL">

6 Convertir l’image en niveaux de gris au survol

<style> .image6 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image6:hover { -webkit-filter: grayscale(100%); } </style> <img class="image6" src="Image-URL">

7 Modifier le contraste au survol de l’image

<style> .image7 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image7:hover { -webkit-filter: contrast(160%); } </style> <img class="image7" src="Image-URL">

8 Modifier la luminosité au survol de l’image

<style> .image8 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image8:hover { -webkit-filter: brightness(0.25); } </style> <img class="image8" src="Image-URL">

9 Modifier le flou de l’image au survol

<style> .image9 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image9:hover { -webkit-filter: blur(5px); } </style> <img class="image9" src="Image-URL">

10 Inverser les couleurs de l’image au survol

<style> .image10 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image10:hover { -webkit-filter: invert(100%); } </style> <img class="image10" src="Image-URL">

11 Changer les couleurs d’opacité au survol

<style> .image11 { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .image11:hover { opacity:0.6; filter: alpha(opacity=60); } </style> <img class="image11" src="Image-URL">

Étant donné que tous ces effets sont créés avec du CSS générique, vous pouvez utiliser ces codes sur n’importe quelle page HTML. Par exemple, il s’agit d’un site WordPress et nous avons utilisé le bloc «HTML personnalisé» dans WordPress pour présenter tous les effets de superposition d’images CSS.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails