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动画去悬停

回答

相关问题