CSS動畫去懸停

太高我有一個reddit的新聞源在這裏：CSS動畫去懸停

https://codepen.io/Teeke/pen/YxXXaE

文章的標題出現在懸停。如果文章長度文本太長，則標題將超出視口，使前2-3個單詞無法閱讀。

我可以減少行高，但我想解決這個問題。

兩個選項：

1）使文章的文字上面去的圖片外，保持灰色覆蓋。

2）使彈出停在某個高度：頂部的文本是可讀的，但較低的文本將被隱藏。

這樣做的最佳做法是什麼？

我試過了，overflow：hidden;位置：固定;但都沒有給出可讀的結果。

CSS：

.overlay{ 
     display: block; 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     z-index: 3; 
     // text-shadow: 2px 2px 2px #f22; 
    } 

    .bar, .overlay{ 
     transition: transform 250ms; 
     transform: translateY(80px); 
     color: transparent; 
    } 

    &:hover{ 
     .bar, .overlay{ 
     transform: translateY(0); 
     color: inherit; 
     text-shadow: 2px 2px 2px #222; 
     background: linear-gradient(to top, #001, rgba(0,0,0,0.4) 5px); 
     padding: 8px; 
     } 
    } 

    &.stickied .overlay{ 
     background: linear-gradient(to top, #0f0, transparent 80px); 
    } 

    @media (max-width: 520px){ 
     width: 100% !important; 
    } 
    } 
}

來源

2017-07-26 RubyRube

我想在這種情況下使用第二個選項，它會更好地使字體更小，這不會是一個問題 –

你是第二個建議使字體更小的人。我可能會這樣做。 :) – RubyRube

我會去你的第二個選項。我也建議進行調整：

縮小字體大小
減少的line-height
刪除字母間距
左對齊文本
創建淡出效果時，文本溢出

codepen demo

.grid .item .bar { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    top: 0; 
    width: 100%; 
    height: 200px; 
    padding: 0 4px; 
    z-index: 4; 
    color: white; 
    display: flex; 
} 


.grid .item .bar a { 
    color: inherit; 
    text-decoration: none; 
    font-size: 16px; 
    /* reduced font size */ 
    line-height: 1.2; 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 400; 
    text-align: left; 
    overflow: hidden; 
} 

.grid .item .bar a.zoom { 
    align-self: flex-end; 
    overflow: inherit; 
    z-index: 3; 
} 

.grid .item .bar a:not(.zoom):before { 
    content: ''; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
    top: 0; 
    background: linear-gradient(transparent 175px, #888); 
}

來源

2017-07-26 13:42:10 sol

你有最好的整體建議。接受這個答案。我更喜歡稍微高一點的線條高度和居中的文字。所以我調整了你的設計。乾杯! https://codepen.io/Teeke/pen/EvjPZG – RubyRube

如果你要中心對齊文本，你可以添加這些調整... https：// codepen。io/solbreslin/pen/QMbyqO - 我將文本完全居中（水平和垂直），並在縮放圖標上使用'position：absolute'來保持它的位置 – sol

這開始看起來非常優雅:)我認爲font-大小可能會上升幾px，但我激動地炫耀它... – RubyRube

要覆蓋走出容器，加overflow: visible;到類.item

來源

2017-07-26 13:21:15

這很有效，歡呼。在文體上它看起來不太好，但那是我的錯，不是你的。如果是最好的，我會檢查其他答案並將其標記爲正確。 – RubyRube

首先，我建議對.post文字，也許14px較小的字體大小。有一點測試表明文本是100％可讀的。

您也可以考慮修剪下來，如果它太長，使用

.post { 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

來源

2017-07-26 13:25:16

CSS動畫去懸停

回答

相關問題