Question

好的，这个问题有点难以言喻，但我会尽可能清楚地解释这个问题。

我有鼠标悬停＆＃34; pan＃34;我试图实现的效果。到目前为止一切都是正确的，除了鼠标悬停时左侧的图像平移。我希望它从图像右侧开始，向右平移。

简单地将margin-left更改为margin-right周边并不起作用，因为图像仍然在421x840框内左对齐。

所以我的问题是，如何将图像对齐在框内，这样当我悬停鼠标时，它向右平移-150px并显示图像的左侧部分。

我提前感谢任何帮助。谢谢。

HTML code：

<div class="sidepan pic">
<img src="http://dvqlxo2m2q99q.cloudfront.net/000_clients/192648/file/19264814292KWf1.jpg" ></img>
</div>

CSS代码：

.pic {
border: 0px;
    position: absolute;
float: left;
height: 840px;
width: 421px;
margin: 0px;
overflow: hidden;
}
.sidepan img {
margin-left: 0px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}
.sidepan img:hover {
margin-left: -150px;
}

Answer 1

交换边距可以解决问题：

.sidepan img {
  margin-left: -150px;
}
.sidepan img:hover {
  margin-left: 0px;
}

小提琴：http://jsfiddle.net/7ava1y31/42/

如何在平移/悬停边框/框内对齐图像？

1 个答案: