html - Move image up on mouse over -

html - Move image up on mouse over -

i'm trying move image 10px on mouse-over reason doesn't work. here have tried:

http://jsfiddle.net/w3qqv4vh/

css:

.image { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; width: 238px; height: auto; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; overflow: hidden; .image:hover { margin-bottom: 10px; transition: margin-left .5s; -moz-transition: margin-left .5s; /* firefox 4 */ -webkit-transition: margin-left .5s; /* safari , chrome */ -o-transition: margin-left .5s; /* opera */ }

there changes need on css.

css

.image { display: block; position: absolute; top: 0; left: 0; right: 0; z-index: 2; width: 238px; height: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; overflow: hidden; } .image:hover { margin-top: -10px; transition: margin-left .5s; -moz-transition: margin-left .5s; /* firefox 4 */ -webkit-transition: margin-left .5s; /* safari , chrome */ -o-transition: margin-left .5s; /* opera */ }

http://jsfiddle.net/w3qqv4vh/1/

html css css-transitions