Creare degli effetti al passaggio del mouse per le immagini

Valorizza le immagini e attira l'attenzione dei visitatori applicando effetti al passaggio del mouse.

Ultimo aggiornamento 23 dicembre 2024

Gli effetti al passaggio del mouse mostrano informazioni o creano movimento quando sposti il cursore su un'immagine. Questo ti permette di aggiungere al tuo sito un livello di interazione e animazione non invasivo, ideale per mostrare titoli e didascalie senza oscurare un'immagine né occupare spazio aggiuntivo su una pagina.

Puoi usare effetti al passaggio del mouse su qualsiasi sito con Blocchi immagine e Blocchi Galleria Slideshow. A seconda della versione e del modello del sito, il sito potrebbe supportare anche gli effetti al passaggio del mouse in altre aree del sito. Questa guida illustra ogni area in dettaglio.

Suggerimento

La maggior parte dei dispositivi mobili non supporta gli effetti al passaggio del mouse, pertanto l'esperienza dei visitatori può variare a seconda del dispositivo utilizzato per visitare il sito.

Blocchi immagine

Accesso a questa funzionalità

I blocchi immagine aggiunti alle sezioni Fluid Engine non supportano gli effetti di "hover" del mouse o le didascalie incorporate. Crea didascalie utilizzando un blocco di testo per aggiungere testo adiacente o sovrapposto a un blocco immagine.

Puoi visualizzare una didascalia dell'immagine al passaggio del mouse in Blocchi immagine in linea.

  1. Aggiungi un nuovo Blocco immagini o aprine uno esistente.
  2. Clicca sulla scheda Design e seleziona In linea.
  3. Clicca sulla scheda Contenuto, quindi seleziona Didascalia sovrapposta al passaggio del mouse dal menu a discesa Didascalia.
  4. Passa il mouse sul Blocco immagine. Nella didascalia nera che apparirà in sovrapposizione, clicca su Aggiungi una descrizione dell'immagine e inserisci la tua didascalia.
  5. Dopo aver salvato la pagina, la didascalia si visualizza al passaggio del mouse. Usa i ritocchi di stile per conferire stile alla didascalia dell'immagine.

Blocchi galleria a slideshow

Puoi visualizzare i titoli e le descrizioni delle immagini al passaggio del mouse in un Blocco galleria a slideshow.

  • Gli effetti al passaggio del mouse sono disponibili nel design Blocco galleria a slideshow.
  • Titoli e descrizioni non potranno essere visualizzati su dispositivi mobili più stretti di 480 pixel.
  • Le didascalie impostate per comparire al passaggio del mouse possono essere visualizzate sui dispositivi più grandi, ad esempio i tablet, o su quelli più piccoli in modalità orizzontale. Le didascalie saranno sempre visibili oppure appariranno al tocco o al tocco prolungato, a seconda del dispositivo mobile utilizzato.

Per aggiungere testo e abilitare gli effetti al passaggio del mouse:

  1. Aggiungi un nuovo Blocco galleria a slideshow o aprine uno esistente.
  2. Nella scheda Contenuto, passa il mouse su un'immagine e clicca su l'icona dell'ingranaggio.
  3. Immetti un titolo e una descrizione. È inoltre possibile aggiungere un URL di click-through opzionale. 
  4. Clicca su Salva.
  5. Clicca sulla scheda Design .
  6. Spunta Mostra titolo e descrizione.
  7. Seleziona una posizione dal menu a discesa Posizione del titolo e della descrizione.
  8. Clicca su Mostra al passaggio del mouse.
  9. Clicca su Applica.

Pagine Portfolio

Alcuni layout di pagina del portfolio supportano gli effetti al passaggio del mouse. Nell'editor della pagina del portfolio, scegli uno dei seguenti layout:

  • Passaggio del mouse: sfondo - Mostra i titoli dei progetti secondo un layout impilato o in linea. Passando il mouse sopra un titolo, l'immagine in evidenza del progetto sostituisce lo sfondo della sezione.
  • Al passaggio del mouse: fisso - Visualizza i titoli delle pagine secondarie secondo un layout impilato o in linea. Passando il mouse sopra un titolo, l'immagine in evidenza del progetto viene visualizzata più piccola, in una posizione fissa della sezione.
  • Al passaggio del mouse: segui cursore - Visualizza i titoli dei progetti secondo un layout impilato o in linea. Passando il mouse sopra un titolo, l'immagine in evidenza del progetto viene visualizzata più piccola e segue il movimento del cursore. 

Per maggiori informazioni, visita Pagine portfolio

Pagine negozio

Gli effetti al passaggio del mouse funzionano in modo diverso a seconda della versione del sito. 

Quando un prodotto ha più di un'immagine, la Pagina negozio mostra un'immagine di prodotto alternativa al passaggio del mouse. Per maggiori informazioni, visita Definire lo stile delle Pagine negozio

Il modo in cui gli effetti al passaggio del mouse vengono visualizzati dipende dal tipo di Pagina negozio della famiglia del tuo modello:

Pagine galleria (versione 7.0)

Alcuni modelli supportano gli effetti al passaggio del mouse per le Pagine galleria. Puoi attivare e regolare questi effetti usando Stili sito.

Titoli e descrizioni delle immagini vengono visualizzati al passaggio del mouse per i design Slideshow e A griglia nelle seguenti famiglie di modelli:

  • Adirondack
  • Aviator
  • Bedford
  • Brine
  • Farro
  • Five
  • Galapagos
  • Native
  • Pacific
  • Skye
  • York

Abilitare e personalizzare l'effetto al passaggio del mouse

Nella Pagina galleria, apri Stili sito e scorri verso il basso fino a Stili galleria. Clicca su Design galleria e seleziona Slideshow o Griglia

  • Slideshow - Seleziona Mostra al passaggio del mouse dal menu a discesa Overlay Info Galleria. Titoli e descrizioni saranno visualizzati al passaggio del mouse. Le didascalie impostate per apparire al passaggio del mouse possono essere visualizzate sui dispositivi mobili più grandi, ad esempio i tablet, o su quelli più piccoli in modalità orizzontale. Le didascalie saranno sempre visibili oppure appariranno al tocco o al tocco prolungato, a seconda del dispositivo mobile.
  • Griglia: titoli e descrizioni si visualizzano al passaggio del mouse quando l'immagine viene aperta in una lightbox, a meno che l'immagine non abbia un URL di click-through. Per ulteriori informazioni, visita Impostare le immagini da aprire in una lightbox.

Altri effetti della Pagina galleria per modello

Le Pagine galleria presentano effetti speciali al passaggio del mouse nelle seguenti famiglie di modelli:

  • Forte - Passando il mouse sul carosello della Pagina galleria, compariranno le frecce di navigazione. Passando il mouse su una didascalia, questa scorrerà verso l'alto in modo da poter leggere le descrizioni più lunghe.
  • Momentum - Freccia di navigazione al passaggio del mouse in modalità schermo intero.
  • Tremont - Mostra le didascalie al passaggio del mouse.
  • Wexley - Passare il mouse sulle immagini in una Pagina galleria ne visualizza il titolo e un colore di sovrapposizione.

Pagine Indice (versione 7.0)

Le Pagine indice presentano effetti speciali al passaggio del mouse nelle seguenti famiglie di modelli:

  • Avenue - Passare il mouse su una miniatura ne modifica l'opacità. Puoi anche mostrare il titolo di navigazione della pagina al passaggio del mouse.
  • Flatiron - Passare con il mouse su una miniatura ingrandisce e fa una panoramica dell'immagine.
  • Montauk - Passare il mouse su una miniatura ne modifica l'opacità.
  • Tremont - Passare il mouse su un titolo della pagina nella navigazione dell'Indice fa sì che l'immagine in evidenza della pagina venga visualizzata come un immagine di sfondo.
  • York - Le immagini in miniatura possono dissolversi al passaggio del mouse e i titoli delle miniature possono essere visualizzati al passaggio del mouse.

Visita le guide ai modelli per maggiori informazioni.

Footer Image
  • Ricevi assistenza dalla nostra community

  • Ricevi assistenza dalla nostra community in merito alle personalizzazioni avanzate.

  • Affidati a uno Squarespace Expert

  • Fatti notare online con l'aiuto di un designer o di uno sviluppatore esperto.

Creare degli effetti al passaggio del mouse per le immagini