[HTML] Pulsanti animati per wordpress

  • Creatore Discussione Creatore Discussione Ragnarr
  • Data di inizio Data di inizio

Ragnarr

Nuovo Utente
23 Feb 2017
15
0
1
40
Salve a tutti,

premetto che questo è il mio primo intervento in questo forum, quindi scusate l'eventuale imprecisione nelle mie espressioni.

Premetto che non sono un informatico ma soltanto una persona che sta cercando di creare il proprio blog da solo, imparando anche per meccanismo di prova ed errore.

Dedico le ultime ore della giornata a costruire il mio blog cercando di farlo il meglio possibile con le risorse a mia disposizione; adesso passo a spiegarvi il mio problema.

Ho creato una pagina descrittiva del servizio che voglio offrire ed ora, anche per snellire il menù, ho deciso di inserire dei pulsanti con i collegamenti alle pagine che sono legate direttamente all'argomento.
Questi pulsanti però vorrei che fossero delle immagini e che si animino al passaggio del mouse (ad esempio che si rialzino o che si scolorino al passaggio del mouse) insomma vorrei creare un'animazione sul pulsante al passaggio del mouse.
Esistono dei plug-in per questo? oppure è possibile farlo in altro modo?

Grazie per l'attenzione e per le eventuali risposte!
 
È possinile farlo con i css3. Non so se esiste dei plug-in per WP perché non conosco a fondo WP, ma se vuoi ti sposto nella sezione adatta
 
Ciao!!!! Grazie! Ho provato il plug-in che mi hai consigliato! E' molto simile ad un'altro che avevo trovato "Image Hover Effect" per entrambi ovviamente per fare qualcosa di carino è necessaria la versione pro! Colgo l'occasione per chiederti se mi conviene acquistare la versione pro oppure lasciare perdere.
In ogni caso il tuo suggerimento mi ha dato visuale su molti plug-in interessanti! Grazie di cuore!
 
E provare con i css3 prima di spendere soldi?
 
ok! Adesso sono proprio in wordpress ad aggiornare un pò di pagine, lo scarico e ti faccio sapere! Grazie!
 
Non ha un funzionamento specifico! Si crea un'animazione attraverso un codice CSS3. Ma sai cosa sono?
 
Allora diventa complicato! Comunque che tipo di animazione vorresti fare?
 
Codice:
<style type="text/css">
.box {
    position: relative;
    margin: 0px;
    padding: 0px;
    height: 300px;
    width: 300px;
}
.testo {
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    margin: 0px;
    padding: 20px;
    height: 260px;
    width: 260px;
    top: 0;
    left: 0;
    visibility: hidden;
    text-align: center;
}
.box:hover .testo {
    visibility: visible;
}
</style>
HTML:
<div class="box">
    <img src="tua-immagine.jpg" width="300" height="300" alt=""/>
    <div class="testo" onClick="document.location.href='tua-pagina.html';">
        Inserite qui il Commento dell'immagine
    </div>
</div>
 
  • Like
Reactions: glm1986ITALY
Codice:
<style type="text/css">
.box {
    position: relative;
    margin: 0px;
    padding: 0px;
    height: 300px;
    width: 300px;
}
.testo {
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    margin: 0px;
    padding: 20px;
    height: 260px;
    width: 260px;
    top: 0;
    left: 0;
    visibility: hidden;
    text-align: center;
}
.box:hover .testo {
    visibility: visible;
}
</style>
HTML:
<div class="box">
    <img src="tua-immagine.jpg" width="300" height="300" alt=""/>
    <div class="testo" onClick="document.location.href='tua-pagina.html';">
        Inserite qui il Commento dell'immagine
    </div>
</div>
ed eccomi qui! Di nuovo alla tastiera! dove dovrei inserire questo codice? Grazie anticipatamente!!!
 
Prova a guardare anche elementor: è un page builder estremamente potente, leggero che fa un po'di tutto!
Plug-in scaricato! Molto semplice ed intuitivo! Sono riuscito in qualche modo a sistemare il tutto! Ovviamente io punto ad imparare di più e a creare queste cose senza il builder! Grazie!
 

Discussioni simili