我將如何在div覆蓋上添加轉換

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