在鼠标上向上移动图像

Question

我试图用鼠标将图像向上移动10px，但由于某种原因，这不起作用。以下是我尝试过的：

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 and Chrome */
  -o-transition: margin-left .5s; /* Opera */
}

Answer 1

您需要对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 and Chrome */
  -o-transition: margin-left .5s; /* Opera */
}

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

Answer 2

转换应用于.image而非.image:hover，只使用transform

body {
  background-color: rgb(255, 255, 255);
  font-family: 'Source Sans Pro';
  font-size: 13px;
  font-weight: 200;
  line-height: 1.38;
  color: #000000;
}
.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;
  -webkit-transform:translateY(0);
  transition: transform .5s ease;
} 
.image:hover {
  -webkit-transform:translateY(-10px);  
}

  <img class="image" alt="" src="http://lorempixel.com/output/food-q-c-284-239-1.jpg">

你也可以使用填充

body {
  background-color: rgb(255, 255, 255);
  font-family: 'Source Sans Pro';
  font-size: 13px;
  font-weight: 200;
  line-height: 1.38;
  color: #000000;
}
.image {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: 238px;
  height: auto;
  margin: auto;
  overflow: hidden;
  transition: padding-bottom .5s ease;
}
  
.image:hover {
  padding-bottom: 10px;    
  
}

  <img class="image" alt="" src="http://lorempixel.com/output/food-q-c-284-239-1.jpg">

Jsfddle