鼠标移开图像

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">

Jsfiddle