Question

我在这里有一个Reddit新闻源：

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

文章标题出现在悬停状态。如果文章长度文本太长，标题将位于视口上方，使前2-3个单词不可读。

我可以减少行高，但我想以不同的方式解决这个问题。

两个选项：

1）使文章文字在图片的上方和外部，保持灰色叠加。

2）使弹出窗口停在某个高度：顶部文本是可读的，但是较低的文本将被隐藏。

这样做的最佳做法是什么？

我试过，溢出：隐藏;和位置：固定;但都没有给出可读的结果。

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;
    }
  }
}

Answer 1

首先，我建议.post文字的字体较小，可能是14px。一些测试表明文本是100％可读的。

如果时间过长，您可能还会考虑使用

进行修剪

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

Answer 2

要使叠加层离开容器，请将overflow: visible;添加到课程.item

Answer 3

我会选择你的第二个选项。我还建议进行这些调整：

缩小字体大小
降低行高
删除字母间距
左对齐文字
文本溢出时创建淡出效果

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);
}

CSS动画在悬停时过高

3 个答案: