Immagine Divi al passaggio del mouseEffetti
Gira la carta
Diapositiva
Effetti al passaggio del mouse sulle immagini Divi: 15 animazioni
Trasforma le tue immagini in esperienze interattive. Divi Image Hover Effects è unmodulo Divi 5 nativoche aggiunge straordinarie animazioni al passaggio del mouse e contenuti in sovrapposizione a qualsiasi immagine, direttamente all'interno di Divi Visual Builder, senza bisogno di codifica.
🃏 Carte ruotabili: integrate
Capovolgi orizzontalmentetrasforma la tua immagine in una veraCarta ruotabile 3D: la parte anteriore mostra la tua immagine, la parte posteriore rivela il contenuto in sovrapposizione con un soddisfacente capovolgimento prospettico. Perfetto per i membri del team, i pezzi del portfolio, le vetrine dei prodotti o qualsiasi situazione in cui desideri rivelare informazioni di impatto.
🎬 15 effetti al passaggio del mouse realizzati a mano
- Dissolvenza- l'opacità classica si rivela con un leggero aumento del contenuto
- Scorri su / giù / sinistra / destra— diapositive direzionali sovrapposte
- Zoom avanti— l'immagine si ingrandisce man mano che viene visualizzata la sovrapposizione
- Rimpicciolisci- l'immagine inizia a essere ingrandita, torna indietro al passaggio del mouse
- Capovolgi orizzontalmente- rotazione completa delle carte 3D con prospettiva
- Sfocatura- l'immagine si ammorbidisce man mano che i tuoi contenuti diventano centrali
- Scala di grigi— L'immagine desatura al passaggio del mouse per un contrasto sorprendente
- Splendore— un leggero bagliore attraversa l'immagine
- Rimbalza dentro— il rivestimento scatta dal basso con energia elastica
- Rivela Sinistra → Destra- rivelazione del percorso di ritaglio in stile tenda
✨ Ricchi contenuti in sovrapposizione
Costruisci visivamente il tuo overlay, esattamente come lo desideri:
- Sfondo sovrapposto: a tinta unita o pienopendenza(colore iniziale, colore finale, direzione)
- Posizione del contenuto —9 punti di ancoraggio(in alto a sinistra, al centro, in basso a destra...)
- Icona: scegli un'icona Divi qualsiasi, impostane il colore e le dimensioni
- Titolo: scegli il tag HTML (H1–H6 o P) e applicagli uno stile completo
- Descrizione: corpo del testo con controllo tipografico completo
- Pulsante di invito all'azione: URL, supporto per nuove schede epannello di progettazione completo dei pulsanti Divi(sfondo, bordo, carattere, spaziatura, dimensionamento, ombra del riquadro)
⚙️ Controlli di animazione di precisione
Regola tutto direttamente nel Visual Builder senza lasciare la tua pagina:
- Animazionevelocità— qualsiasi durata CSS valida (
0.3s,500ms…) - Animazioneallentamento- Facilità, Facilità di entrata, Facilità di uscita, Facilità di entrata, Lineare
🎨 Personalizzazione completa del design Divi
Poiché Divi Image Hover Effects è un vero modulo Divi 5 nativo, puoi accedere asistema di progettazione Divi completo— gli stessi strumenti che usi su ogni altro modulo:
- Controlli tipografici per titolo, descrizione e pulsante
- Sfondi, sfumature e immagini sul modulo
- Bordi, ombre del riquadro e raggio del bordo
- Spaziatura (margine
- Filtri, trasformazioni e animazioni
- Posizionamento fisso, effetti di scorrimento e z-index
- Visibilità reattiva e CSS personalizzato per punto di interruzione
Tutto ciò che ti aspetti da un modulo Divi, subito pronto all'uso.
🔍 Anteprima di True Visual Builder
La sovrapposizione è sempre visibile nell'area di disegno in modo da poter modificare comodamente i tuoi contenuti. Attivaremodalità passaggio del mousenel pannello Design per visualizzare in anteprima gli stili al passaggio del mouse (colori, transizioni e animazioni di rotazione) esattamente come li vedranno i tuoi visitatori.
♿ Prestazioni
- Le immagini utilizzano nativecaricamento pigroper velocità di pagina elevate
- Animazioni automaticamentedisabilitare per gli utenti che preferiscono il movimento ridotto(
prefers-reduced-motion) - Transizioni accelerate dalla GPU per un rendering setoso a 60 fps
📋 Requisiti
- Divi 5 (non compatibile con Divi 4)
- Wordpress 6.0
- PHP7.4
