TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Widget di capovolgimento orizzontale CSS dell’immagine

1

I fogli di stile a cascata o CSS possono essere facilmente utilizzati per aggiungere effetti attraenti alle immagini nel tuo sito. A volte potresti chiederti come viene fatto il capovolgimento dell’immagine insieme alla visualizzazione del testo. Ecco il semplice codice del widget per creare tale effetto utilizzando HTML e CSS.

  • Crea un effetto immagine con uno stile di ribaltamento orizzontale.
  • Visualizza un’immagine che si capovolge orizzontalmente quando si sposta il mouse.
  • Quando il mouse è acceso, viene visualizzato un messaggio di testo.
  • L’immagine tornerà indietro quando si estrae il mouse.

Codice per la creazione di un’immagine capovolta orizzontale con la visualizzazione del testo

Ci sono due parti per creare un widget di immagine capovolta orizzontale.

  • HTML: questo codice deve essere aggiunto nella pagina Web in cui si desidera visualizzare l’immagine.
  • CSS – Questo codice deve essere aggiunto nel tuo CSS. Si consiglia di aggiungere questo codice nel foglio di stile esterno per ridurre la velocità di caricamento della pagina. Puoi anche aggiungerlo insieme al codice HTML in linea all’interno di una pagina, il che significa semplicemente copiare e incollare il codice insieme al codice HTML sulla pagina.

Ecco un codice HTML, puoi sostituire l’URL di destinazione, l’immagine e visualizzare il testo da te.

<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>

Ecco un codice CSS, puoi personalizzare la dimensione dell’immagine, l’angolo di rotazione e il colore di sfondo in base alle tue esigenze:

<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>

Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More