Joomla.it Forum

Joomla! 3 => Joomla! 3 => : EmoArt 18 Mar 2016, 18:28:41

: come creare effetti rollover su immagini
: EmoArt 18 Mar 2016, 18:28:41
Salve, vorrei creare , dato un articolo contenente delle immagini, un effeto quando si passa il mouse al di sopra dell'immagine (uno zoom, oscuramento o qualche altra cosa..)ed al suo click aprire un collegamento ad un'altra pagina del sito stesso. Sto provando ad usare la versione free di widgetikiti ma non ci capisco molto..
al momento ho scritto questo codice
:
<a data-spotlight="effect:bottom;" href="mypage.html">
        <img src="images/image.jpg" width="180" height="120" alt="" />
        <div class="overlay">Custom Overlay</div>
    </a>
ma la scritta "custom Overlay" non appare sopra l'immagine, cosa sbaglio? qualcuno può spiegarmi meglio come fare? Grazie.
: Re:come creare effetti rollover su immagini
: Francesco Di Giovanni 18 Mar 2016, 20:22:22
Ciao :)
ti scrivo il link di un tutorial è un po datato ma dovrebbe funzionare,  http://www.joomla.it/articoli-community-16-e-17-tab/5469-widegetkit-un-comodo-strumento-per-il-nostro-sito.html (http://www.joomla.it/articoli-community-16-e-17-tab/5469-widegetkit-un-comodo-strumento-per-il-nostro-sito.html)



 ;)
: Re:come creare effetti rollover su immagini
: EmoArt 23 Mar 2016, 15:27:41
Ciao grazie per la tua risposta, avevo visto già quella guida, ma non riesco a capire che codice usare per creare uno spotlight come nella terza immagine che l'autore usa nel sito d'esempio, vorrei l'effetto che fà scorrere sopra l'immagine, una striscia scura come se apparisse da destra o sinistra..
: Re:come creare effetti rollover su immagini
: tomtomeight 23 Mar 2016, 21:58:45
Ciao

Forse puoi prendere spunto da questa intro che ho realizzato per un mio sito,  in pratica faccio scorrere da sinistra a destra  un rettangolo bianco sfumato a sinistra che scopre una immagine con testo. Fatta tutta in html e puoi copiare e adattare il codice. ( in una versione precedente lo stesso effetto lo avevo realizzato in flash)

Url mariangelavacatello.com

prendi il codice e lo inserisci nel modulo html o dove ti serve.