come creare effetti rollover su immagini

[EmoArt]

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

Codice: [Seleziona]

<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.

[Francesco Di Giovanni]

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



 

[EmoArt]

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..

[tomtomeight]

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.