hover Image slide up on css - css

Question

I'm using css3, an image that when you hover over it will slides up like this
I find this example,but I want not the box's background property.
<div class="box">
<img src=image/image.jpg>
</div>
Image source is from html,not css background property
I'm just wondering if anyone can point me to a good tutorial or can help me with it?

Answer 1

Well I've come up with a quick example how you could do it, you can play around change values and improve it. I hope it helps.
.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;
}
Example:
https://jsfiddle.net/pqrnt921/1/

Answer 2

A pure CSS3 slide up transition effect works better if you move the transition properties to the normal state, like this:
.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;
}
This way, on roll Out you'll get a nice transition to the original position.

Answer 3

If you want this to be more universal so you don't have to worry about what image you are using (I mean, you don't have to worry about image width), I propose using background-image, background-position and background-size.
Here is JSfiddle example.

Answer 4

Based on Joe's answer so, thanks Joe :).
For top-to-bottom sliding, you can simply use the following code.
div {
width: 400px;
height: 200px;
background-image: url('https://shrinktheweb.snapito.io/v2/webshot/spu-ea68c8-ogi2-3cwn3bmfojjlb56e?size=800x0&screen=1024x768&url=http%3A%2F%2Fisolpro.in');
background-size: cover;
background-position: top;
transition: all 2s;
}
div:hover {
background-position: bottom;
}
<div>
</div>
BTW, I have used https://snapito.com/ to take fullpage screenshot of my website.