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

Ajouter un effet de survol d’image en perspective dans Weebly

2

Vous utilisez peut-être beaucoup d’images sur votre site Weebly, mais souhaitez mettre en évidence uniquement les images importantes pour les utilisateurs de différentes manières pour les attirer. Par exemple, vous pouvez créer une page de portfolio de présentation et afficher les images de votre travail sur des projets, des photographies, des vidéos, etc. L’ajout d’un effet de survol de perspective à ces images de portfolio attire l’attention de l’utilisateur et améliore l’engagement. Dans cet article, nous montrons comment ajouter un effet de survol de perspective aux images de votre site Weebly. Vous trouverez ci-dessous un exemple d’image avec effet de survol et déplacez la souris sur l’image pour voir l’effet de survol en perspective.

Comment ajouter un effet de survol de perspective à une image ?

Le processus consiste en trois étapes simples :

  • Télécharger une image sur votre site Weebly
  • Ajout de code CSS
  • Ajout de code HTML

Étape 1 – Téléchargement d’une image

Connectez-vous à votre compte Weebly, choisissez le site que vous souhaitez éditer et accédez à «Design > Edit HTML / CSS ». Cliquez sur le bouton + disponible à côté de "Actifs", puis sélectionnez l’option "Télécharger le(s) fichier(s)". Téléchargez l’image à laquelle vous souhaitez ajouter un effet de survol. En savoir plus sur l’édition du CSS source du site Weebly.

Ajouter un effet de survol d'image en perspective dans Weebly

Téléchargement d’un fichier sur le site Weebly

L’URL de l’image téléchargée doit ressembler à – " http://yoursitename.weebly.com/files/theme/image-name.jpg ". Remplacez le nom du site et de l’image par le vôtre dans l’URL.

Étape 2 – Ajout de code CSS pour l’effet de survol

Ajoutez le code CSS ci-dessous dans la section «Pages > Sélectionnez la page > Paramètres avancés > Code d’en-tête ». Remplacez l’URL de l’image par votre propre URL d’image de l’étape 1.

<style type="text/css"> .thumb { width: 400px; height: 300px; margin: 70px auto; perspective: 1000px; } .thumb a { display: block; width: 100%; height: 100%; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88087-6131f5c007508.jpg"); background-size: 0, cover; transform-style: preserve-3d; transition: all 0.5s; } .thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;} .thumb a:after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 36px; background: inherit; background-size: cover, cover; background-position: bottom; transform: rotateX(90deg); transform-origin: bottom; } .thumb a span { color: white; text-transform: uppercase; position: absolute; top: 100%; left: 0; width: 100%; font: bold 12px/36px Montserrat; text-align: center; transform: rotateX(-89.99deg); transform-origin: top; z-index: 1; } .thumb a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5); transition: all 0.5s; opacity: 0.15; transform: rotateX(95deg) translateZ(-80px) scale(0.75); transform-origin: bottom; } .thumb:hover a:before { opacity: 1; box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5); transform: rotateX(0) translateZ(-60px) scale(0.85); } </style>

Étape 3 – Ajout de HTML

La dernière étape consiste à ajouter le code ci-dessous dans la zone de contenu à l’intérieur d’un élément « Embed Code ».

<div class="thumb"> <a href="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88087-6131f5c007508.jpg"> <span>KungFu Panda</span> </a> </div>

L’image peut ne pas être visible dans l’éditeur Weebly, publiez votre site et passez la souris sur l’image pour voir l’effet d’image de perspective est ajouté à l’image.

Vous recherchez un widget de partage d’images avec un effet de survol en perspective comme ci-dessous ?

Lire la suite…

Source d’enregistrement: 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