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

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

这是一个demo在 JsBin 上。

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

最佳答案

不是使用 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 以移除图像下方的小空白。

关于html - 通过图像过渡动态调整 div 的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39276974/

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

上一篇：html - 滑动按钮 [Ionic]

下一篇：java - Jersey 没有加载 index.html