Question

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

这是JsBin上的demo。

＆＃13;

select unique_id
from user_2016_09
union 
select unique_id
from user_2016_10
union 
select unique_id
from user_2016_11
.....

＆＃13;

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

＆＃13;

Answer 1

不使用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%);
}

然后你去！干杯！

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

还做了一些小改动：

使用<和>获取正确的XHTML语法
为图片添加display: block以删除图片下方的小空白。

Answer 2

请勿使用margin-top。使用bottom将其锚定到其父级的底部。

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

2 个答案: