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

Aggiungi l’effetto al passaggio del mouse sull’immagine in prospettiva in Weebly

3

Potresti utilizzare molte immagini sul tuo sito Weebly ma volevi evidenziare solo le immagini importanti per gli utenti in modo diverso per attirarli. Ad esempio, puoi creare una pagina del portfolio vetrina e visualizzare le immagini del tuo lavoro su progetti, fotografie, video, ecc. L’aggiunta di un effetto hover prospettico a tali immagini del portfolio attira l’attenzione dell’utente e migliora il coinvolgimento. In questo articolo mostriamo come aggiungere l’effetto di hovering prospettico alle immagini sul tuo sito Weebly. Di seguito è riportato un esempio dell’immagine con effetto hovering e spostare il mouse sull’immagine per vedere l’effetto hovering prospettico.

Come aggiungere l’effetto di hovering prospettico a un’immagine?

Il processo consiste in tre semplici passaggi:

  • Caricamento dell’immagine sul tuo sito Weebly
  • Aggiunta di codice CSS
  • Aggiunta di codice HTML

Passaggio 1 – Caricamento di un’immagine

Accedi al tuo account Weebly, scegli il sito che desideri modificare e vai su “Design > Modifica HTML/CSS". Fai clic sul pulsante + disponibile accanto a "Risorse" e quindi seleziona l’opzione "Carica file". Carica l’immagine a cui desideri aggiungere l’effetto al passaggio del mouse. Ulteriori informazioni sulla modifica del CSS sorgente del sito Weebly.

Aggiungi l'effetto al passaggio del mouse sull'immagine in prospettiva in Weebly

Caricamento file nel sito Weebly

L’URL dell’immagine caricata dovrebbe essere del tipo – ” http://yoursitename.weebly.com/files/theme/image-name.jpg “. Sostituisci il sito e il nome dell’immagine con il tuo nell’URL.

Passaggio 2: aggiunta del codice CSS per l’effetto al passaggio del mouse

Aggiungi il seguente codice CSS nella sezione "Pagine> Seleziona la pagina> Impostazioni avanzate> Codice intestazione". Sostituisci l’URL dell’immagine con l’URL della tua immagine dal passaggio 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>

Passaggio 3 – Aggiunta di HTML

Il passaggio finale consiste nell’aggiungere il codice seguente nell’area del contenuto all’interno di un elemento "Codice da incorporare".

<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’immagine potrebbe non essere visibile all’interno dell’editor Weebly, pubblica il tuo sito e passa il mouse sull’immagine per vedere che l’effetto dell’immagine prospettica viene aggiunto all’immagine.

Cerchi un widget per la condivisione delle immagini insieme all’effetto al passaggio del mouse prospettico come di seguito?

Per saperne di più…

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