effetto CSS

[m3820]

effetto CSS

Buonasera ragazzi,

Vorrei realizzare un effetto ma non so come fare, qualcuno può aiutarmi o può darmi qualche indicazione.

L'effetto prevede che in una pagina web ci sia una semplice immagine. Quest'immagine quando ci passo col mause deve scorrere verso il basso di un po e mostrare sotto un link.

Come si fa?

Grazie

[hlover]

Ciao, ti ho fatto un esempio ad hoc.
Credo sia quello che intendi

HTML

<div class="effetto">
    <a class="link" href="{LINK}">Un bel link
    </a>
    <img class="immagine" src="{IMMAGINE}" />
</div>

CSS

.effetto {
    position: relative;
    height: 70px;
    width: 310px;
    background: #ccc;
    text-align: center;
    
}
.effetto img.immagine {
    position: absolute;
    top: 0;
    left: 0;
    transition: top 0.2s ease-in-out;
    width: 310px;
    background: white;
}
.effetto:hover img.immagine {
    position: relative;
    top: 30px;
}

Per l'esempio funzionante guarda qui

//jsfiddle.net/7s9nvykb/

[jacko.s.websolutions]

hLover, puoi copiare direttamente il codice qui senza utilizzare servizi esterni mediante i tag [CODE]

[hlover]

Ho editato il primo post. Mantengo il link in quanto c'è l'esempio funzionante

[m3820]

@hLover said:

Ho editato il primo post. Mantengo il link in quanto c'è l'esempio funzionante

Grazie