schweben Bild Folie nach oben auf css

Question

ich css3 bin mit, ein Bild, dass, wenn Sie über schweben wird es gleitet nach oben wie this

ich diese example finden, aber ich will nicht die Hintergrund Unterkunft Box.

<div class="box"> 
    <img src=image/image.jpg> 
    </div> 

Bildquelle ist von html, css nicht Hintergrund Eigenschaft

Ich frage mich nur, ob jemand mir ein gutes Tutorial zeigen kann oder kann mir dabei helfen?

Answer 1

Nun, ich habe ein kurzes Beispiel dafür entwickelt, wie Sie es tun können, Sie können Änderungswerte spielen und verbessern. Ich hoffe, es hilft.

.box{ 
    display: block; 
    width: 200px; 
    height: 100px; 
    overflow: hidden; 
    background: black; 
} 
.box img{ 
    width:200px; 
    float:left; 
} 
.box:hover img{ 
    margin-top:-200px; 
    -webkit-transition: margin 1s; 
    -moz-transition: margin 1s; 
    transition: margin 1s; 
} 

Beispiel: https://jsfiddle.net/pqrnt921/1/

Answer 2

Eine reine CSS3 gleiten Übergangseffekt funktioniert besser, wenn Sie die Übergangseigenschaften in den Normalzustand, wie diese bewegen:

.box{ 
    display: block; 
    width: 200px; 
    height: 100px; 
    overflow: hidden; 
    background: black; 
} 
.box img{ /* Normal state */ 
    width:200px; 
    float:left; 
    -webkit-transition: all 400ms ease-in-out; 
    -moz-transition: all 400ms ease-in-out; 
    transition: all 400ms ease-in-out; 
} 
.box:hover img{ 
    margin-top:-200px; 
} 

diese Weise auf der Rolle Sie erhalten einen schönen Übergang zur ursprünglichen Position.

Answer 3

Wenn Sie dies wollen mehr universell sein, so dass Sie müssen nicht darum kümmern, was Bild, das Sie verwenden (ich meine, Sie müssen sich keine Gedanken über die Bildbreite Sorge), schlage ich vor, mit background-image, background-position und background-size . Hier ist JSfiddle Beispiel.