通过图像过渡动态调整 div 的高度

Question

我在鼠标悬停时显示了图片说明。我通过更改 margin-top 值使其向上过渡。问题是我希望它能够获取尽可能多的文本，但仍然让所有内容都出现在图像上。

这是 JsBin 上的 demo。

.myslider{
  overflow:hidden;
  position: relative;
  max-width:400px; 
}

.myslider img{
 width:100%;
 
}

.title{
  position:absolute;
  width: 100%;
  height:20px;
  padding-bottom: 2px;
  margin-top: -20px;
  transition: margin-top 200ms ease-in;
  
  background:black;
  opacity:0.6;  
}

.title-text{
  color:white;
  float left;
  padding-left:5px;
  
}

.nav-buttons{
 background: white;
 float:right;
 padding: 0px 5px 0px 5px;
 border: 1px solid black;
 margin: 0px 5px 0px 0px;
 cursor:pointer;
}

.myslider:hover .title{
  margin-top: 0px
}

.description {
  text-align: center;
  position:absolute;
  width: 100%;

  
  margin-top:0px;
  transition: margin-top 200ms ease-in; 
  color:white;
  background:black;
  opacity: 0.6;

}

.myslider:hover .description {
  margin-top: -20px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="myslider">
      <div class="title">
        <span class="title-text">Image 1 </span>
        <span class= "nav-buttons"> > </span>
        <span class= "nav-buttons"> < </span>
      </div> 
      <img src="http://placekitten.com/400/400">
      <div class="description">Image Caption: Should accept as much text as posisble. more text, more text, more text</div>
  </div>
</body>
</html>

Answer 1

不要使用 margin-top。使用 bottom 将其锚定到其父项的底部。

Answer 2

不要使用 margin-top 来制作动画，而是使用 transform 属性来制作动画：

.description {
  text-align: center;
  position: absolute;
  width: 100%;
  transition: transform 200ms ease-in;
  color: white;
  background: black;
  opacity: 0.6;
}
.myslider:hover .description {
  transform: translate(0, -100%);
}

好了！干杯！

.myslider {
  overflow: hidden;
  position: relative;
  max-width: 400px;
}
.myslider img {
  width: 100%;
  display: block;
}
.title {
  position: absolute;
  width: 100%;
  height: 20px;
  padding-bottom: 2px;
  margin-top: -20px;
  transition: margin-top 200ms ease-in;
  background: black;
  opacity: 0.6;
}
.title-text {
  color: white;
  float left;
  padding-left: 5px;
}
.nav-buttons {
  background: white;
  float: right;
  padding: 0px 5px 0px 5px;
  border: 1px solid black;
  margin: 0px 5px 0px 0px;
  cursor: pointer;
}
.myslider:hover .title {
  margin-top: 0px
}
.description {
  text-align: center;
  position: absolute;
  width: 100%;
  transition: transform 200ms ease-in;
  color: white;
  background: black;
  opacity: 0.6;
}
.myslider:hover .description {
  transform: translate(0, -100%);
}

<div class="myslider">
  <div class="title">
    <span class="title-text">Image 1 </span>
    <span class="nav-buttons"> &gt; </span>
    <span class="nav-buttons"> &lt; </span>
  </div>
  <img src="http://placekitten.com/400/400">
  <div class="description">Image Caption: Should accept as much text as posisble. more text, more text, more text</div>
</div>

还做了一些小改动：

使用 < 和 > 以获得正确的 XHTML 语法
在图像中添加了 display: block 以删除图像下方的小空白。

通过图像过渡动态调整 div 的高度

Dynamically adjust height of div with transition over image

html

css

image

css-position

css-transforms