CSS疊加 - 從底部淡入

-1

我有一個內部有多個框的網格。每個盒子都有一個疊印，標題和一些段落。覆蓋層位於盒子下方，只有標題可見（底部：〜-90％）。CSS疊加 - 從底部淡入

鼠標懸停時，疊加層向上移動，直到完全可見爲止（bottom：0）。文本對齊框的底部。

正如您在下面的示例（整頁）中看到的，我對段落的動態高度有一些問題。

你有什麼想法，該如何解決這個問題？

.grid-item { 
 
    position: relative; 
 
    float: left; 
 

 
    height: 300px; 
 
    width: 300px; 
 
    
 
    margin-right: 30px; 
 

 
    background: #009345; 
 
} 
 
.grid-item:hover .item-overlay{ 
 
    bottom: 0; 
 
} 
 

 
.item-overlay { 
 
    position: absolute; 
 
    z-index: 2; 
 
    
 
    bottom: -30%; 
 
    
 
    padding: 1rem; 
 
    
 
    color: #ededed; 
 
    transition: bottom .5s ease-in-out; 
 
} 
 
.item-title { 
 
    background-color: rgba(0,0,0,.5); 
 
}

<div class="grid"> 
 
    <div class="grid-item"> 
 
    <div class="item-overlay"> 
 
     <h2 class="item-title">Visible Headline 1</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Claudii libidini, qui tum erat summo ne 
 
     imperio, dederetur.</p> 
 
    </div> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <div class="item-overlay"> 
 
     <h2 class="item-title">Visible Headline 2</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Claudii libidini, qui tum erat summo ne 
 
     imperio, dederetur. Conclusum est enim contra Cyrenaicos satis acute, nihil ad Epicurum. Quibus ego 
 
     vehementer assentior. Bonum patria: miserum exilium.</p> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-01-17 Marvin

我看不出有什麼問題。在這裏工作很好。 – connexo

可以定位疊加完全淡出人們的視線（top:100%），然後摳覆蓋回來了指定的值（說4EM）與transform:translate。

關於:hover您將翻譯值增加到-100％（等於疊加層自身高度），這意味着疊加層現在將位於父div的底部。

將轉換切換爲transform而不是bottom。

.grid-item { 
 
    position: relative; 
 
    float: left; 
 
    margin-bottom: 1em; 
 
    height: 300px; 
 
    width: 300px; 
 
    margin-right: 30px; 
 
    background: #009345; 
 
    overflow: hidden; 
 
} 
 
.grid-item:hover .item-overlay { 
 
    transform: translateY(-100%); 
 
} 
 
.item-overlay { 
 
    position: absolute; 
 
    z-index: 2; 
 
    top: 100%; 
 
    padding: 1rem; 
 
    transform: translateY(-4em); 
 
    color: #ededed; 
 
    transition: transform .5s ease-in-out; 
 
} 
 
.item-title { 
 
    background-color: rgba(0, 0, 0, .5); 
 
}

<div class="grid"> 
 
    <div class="grid-item"> 
 
    <div class="item-overlay"> 
 
     <h2 class="item-title">Visible Headline 1</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Claudii libidini, qui tum erat summo ne imperio, dederetur.</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="grid-item"> 
 
    <div class="item-overlay"> 
 
     <h2 class="item-title">Visible Headline 2</h2> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Claudii libidini, qui tum erat summo ne imperio, dederetur. Conclusum est enim contra Cyrenaicos satis acute, nihil ad Epicurum. Quibus ego vehementer assentior. Bonum patria: miserum exilium.</p> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-01-17 11:41:54

CSS疊加 - 從底部淡入

回答

相關問題