Question

我在一个相对定位的容器内有一个绝对定位的图像。图像的高度大于容器的高度。我希望图像只使用CSS滚动到最后。问题是图像的高度可能会有所不同，因此有必要确保图像的底部在悬停时与容器的底部对齐。

以下是代码：

.box {
  position: relative;
  display: block;
  height: 200px;
  width: 200px;
  background-color: red;
  overflow: hidden;
}

.box img {
  position: absolute;
  left: 0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

img:hover {
  bottom: 0;
}

<div class="box">
  <img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>

Answer 1

在transition

上试试transform

＆＃13;

.box {
  position: relative;
  display: block;
  height: 200px;
  width: 200px;
  background-color: red;
  overflow: hidden;
}

.box img {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 1s ease;
}

img:hover {
  transform: translateY(-60%);
}

＆＃13;

<div class="box">
  <img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>

＆＃13;

编辑：

由于未设置高度，我建议使用jQuery / js解决方案

＆＃13;

$("img")
  .mouseover(function() {
    var offset = -$(this).height() + 200;
    $(this).css("top", offset);
  })
  .mouseleave(function() {
    $(this).css("top", 0);
  });

＆＃13;

body {
  display: flex;
  justify-content: space-around;
}

.box {
  position: relative;
  display: block;
  height: 200px;
  width: 200px;
  background-color: red;
  overflow: hidden;
}

.box img {
  position: absolute;
  left: 0;
  top: 0;
  transition: top 1s ease;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>

<div class="box">
  <img src="https://upload.wikimedia.org/wikipedia/commons/0/0c/Vertical-Banner-EN.jpg">
</div>

＆＃13;

Answer 2

您需要一种方法来定位等同于bottom: 0px的元素，但将参考作为顶部。

如果设置top: 100%，则元素的顶部将位于父级的底部。然后，设置transform为100％，bottom将是top所在的位置。

请注意，此解决方案适用于任何图像和容器高度。

＆＃13;

.box {
  position: relative;
  display: block;
  height: 200px;
  width: 200px;
  background-color: red;
  overflow: hidden;
}

.box img {
  position: absolute;
  left: 0;
  top: 0%;
  transform: translateY(0%);
  transition: all 1s ease;
}

img:hover {
  top: 100%;
  transform: translateY(-100%);
}

＆＃13;

<div class="box">
  <img src="http://voxman.net/wp-content/uploads/2011/04/whiteonblack.jpg">
</div>

＆＃13;

Answer 3

您可以在bottom: 0和bottom: calc(100% - 18px)之间进行转换，即容器的高度减去box2的高度。

＆＃13;

.box {
  position: relative;
  display: block;
  height: 200px;
  width: 200px;
  background-color: red;
}

.box2 {
  position: absolute;
  height: 18px;
  bottom: calc(100% - 18px);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.box:hover .box2 {
  background-color: green;
  bottom: 0;
}

＆＃13;

<div class="box">
  <div class="box2">
    test
  </div>
</div>

＆＃13;

Answer 4

您可以使用此功能，请使用工作代码段

进行尝试

.box{
  position:relative;
  display:block;
  height:200px;
  width:200px;
  background-color:red;
  transition: all 1s ease;
}
.box2{
position: absolute;
transition: all 1s ease;
}

.box:hover .box2{
  background-color:green;
  margin-top: 180px;
}

<div class="box">
<div class="box2">
test
</div>
</div>

为什么过渡不适用于绝对定位的图像？

4 个答案: