Question

我想在叠加层上添加一个转换，但我无法确定它需要使用哪个类来使其工作。我希望它从顶部过渡。

的内容

-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;

HTML

<ul class="about-image">
<li>
    <div class="image"></div>
    <div class="overlay"><div class="bt1">Dan Morris</div><div     class="bt2">Multimedia Journalist</div></div>
</li>
</ul>

CSS

.image{
height: 252px;
width: 252px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 40px;
background-image: url(../images/danmorris_profile.png);
}

.overlay{
width:252px;
height:252px;
display:none;
position:absolute;
top:40px;
left:0px;
}

.overlay div {
position:relative;
display:inline-block;
top:40px;
margin: 40px 5px 0 0;
}

ul { list-style: none; width: 252px; 
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;

}

ul li {
position: relative;
display: inline-block;
width: 252px;
height: 252px;
}

li:hover .overlay {
display:block;
background-color:black;
opacity:0.75;
}

.bt1 {
background-color:orange;
width:50px;
height:50px;
}

.bt2 {
background-color:green;
width:50px;
height:50px;
}

非常感谢任何帮助。提前致谢

Answer 1

您需要将效果应用于.overlay - 转换无法设置为transform，因为它不受支持（Reference）。

要获得您想要的效果，请尝试以下操作：

删除你的display: none; - 这不能动画。

完全标记.overlay，但设置top: -100%;，position: absolute;和transition: top 0.3s ease-in-out;。

悬停时，只需更改为top: 0;。

最后，将overflow: hidden;添加到li容器中。

ul { 
  list-style: none; 
  width: 252px; 
  margin: 40px auto 60px auto;
}
ul li {
  position: relative;
  display: inline-block;
  width: 252px;
  height: 252px;
  overflow: hidden;
}
li:hover .overlay {
  top: 0;
}
.overlay{
  width:252px;
  height:252px;
  opacity: 0.75;
  position:absolute;
  background-color:black;
  top:-100%;
  transition: top 0.3s ease-in-out;
}
.overlay div {
  position:relative;
  display:inline-block;
  top:40px;
  margin: 40px 5px 0 0;
}
.bt1 {
  background-color:orange;
  width:50px;
  height:50px;
}

.bt2 {
  background-color:green;
  width:50px;
  height:50px;
}

<ul class="about-image">
<li>
    <img src="http://placehold.it/252x252"></div>
    <div class="overlay">
      <div class="bt1">Dan Morris</div>
      <div class="bt2">Multimedia Journalist</div>
    </div>
</li>
</ul>

为方便起见，我已将.image移动到元素 - 但它可以同时使用。还增加了一些平滑度。

Pen here

我将如何在div叠加上添加过渡

1 个答案: