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

Widget d’image de retournement horizontal CSS

1

Les feuilles de style en cascade ou CSS peuvent être facilement utilisées pour ajouter des effets attrayants aux images de votre site. Parfois, vous pouvez vous demander comment se fait le retournement de l’image avec l’affichage du texte. Voici le code de widget simple pour créer un tel effet en utilisant HTML et CSS.

  • Créez un effet d’image avec un style de retournement horizontal.
  • Affiche une image qui se retourne horizontalement au passage de la souris.
  • Un message texte s’affiche lorsque la souris est allumée.
  • L’image se retournera lorsque la souris sera retirée.

Code pour créer une image de retournement horizontal avec affichage de texte

Il y a deux parties pour créer un tel widget d’image de retournement horizontal.

  • HTML – Ce code est à ajouter dans votre page Web où vous souhaitez afficher l’image.
  • CSS – Ce code est à ajouter dans votre CSS. Il est recommandé d’ajouter ce code dans votre feuille de style externe pour réduire la vitesse de chargement des pages. Vous pouvez également l’ajouter avec le code HTML en ligne dans une page, ce qui signifie simplement copier et coller le code avec le code HTML sur la page.

Voici un code HTML, vous pouvez remplacer vous-même l’URL cible, l’image et le texte d’affichage.

<div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <a href=https://www.webnots.com/step-by-step-seo-tutorial/search-engine-optimization-guide/><Img data-src="https://techblog.sdstudio.top/wp-content/uploads/2021/09/post-88474-613212da8701a.png"> </div> <div class="backside"><br> <p align=justify> <font face=arial size=5 color=brown>Search engine optimization is a technique of making your site search engine friendly. Download free SEO guide here to improve your site's ranking...</font> </p></a> </div> </div> </div>

Voici un code CSS, vous pouvez personnaliser la taille de l’image, l’angle de rotation et la couleur de fond selon vos besoins :

<style type="text/css"> /* Start: Suport for IE */ .image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } /* End: Support for IE */ .image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .image-flip, .frontside, .backside { width: 300px; height: 250px; } .mainflip { -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -ms-transition: 1s; -moz-transition: 1s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: relative; } .frontside, .backside { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -moz-transition: 1s; -moz-transform-style: preserve-3d; -o-transition: 1s; -o-transform-style: preserve-3d; -ms-transition: 1s; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .frontside { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); background: grey; z-index: 2; } .backside { background: white; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } </style>

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