effetto movimento immagini jquery

  • Creatore Discussione Creatore Discussione Fabio90
  • Data di inizio Data di inizio

Fabio90

Utente Attivo
29 Feb 2012
507
0
16
Buongiorno,
secondo voi come è stato realizzato l'effetto delle immagini di questo sito?

Potrebbe essere un qualcosa di questo tipo?

$("#nome_img").hover(function() {

//spostamento in alto 100px;
//opacità 0.5

}
 
Ciao, dal sorgente si vede che hanno utilizzato i css3, prova questo esempio
HTML:
<style type="text/css">
    div.immagine {
        width: 400px;
        height: 600px;
        background: transparent url("img/immagine.jpg") top center;
        transition: all 0.7s ease-in-out 0s;
        opacity: 0.7;
    }

    div.immagine:hover{
        opacity: 1;
        background-position:center -50px;
    }
</style>
<div class="immagine"></div>
qui per vederlo in azione.
Ormai anche IE si è adeguato, le versioni più vecchie saranno escluse ma questo è un'altro discorso.
 
Wao! grazie infinite criric! e riguardo al fatto che sono sempre adeguate alla grandezza dello schermo?

Dovrei realizzare 4 immagini allineate una sotto l'altra sempre adeguate alla grandezza dello schermo... Dici che sia possibile?
Ho buttato giù un esempio che puoi vedere in allegato

Immagine.jpg
 
Dovrai usare le % al posto dei px, anche per il background se non ricordo male la sintassi è questa
Codice:
background-size:100% 100%;
 

Discussioni simili