Question

我试图让文字出现在图片悬停上，但需要它从顶部滑入并仅覆盖图像高度的50％，但不知道如何让它工作，这里是代码

<img style="background-color:#3b283e; float:left;" src="images/f1.jpg" />
<div class="cags1">Traditional Pastry</div>

和CSS

.cags1{
    background-color: #3b283e;
    float:left;
}

.cags1:hover > img {
    opacity:0.5;
    padding: 10px;
    font-family: Tahoma,Arial,Helvetica;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 1px;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 1px 3px #000000;
}

Answer 1

以下是基于您的代码的工作示例：

.img-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.img-container img {
  background-color:#3b283e;
  float:left
}
.cags1 {
    background-color: #3b283e;
    position: absolute;
    top: -20px;
    transition: 0.5s;
}

.img-container:hover > img {
    opacity:0.5;
    padding: 10px;
    font-family: Tahoma,Arial,Helvetica;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 1px;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 1px 3px #000000;
}
.img-container:hover .cags1 {
  top: 20px;
}

<div class="img-container">
  <img src="https://dummyimage.com/150x75/992c99/313abd" />
  <div class="cags1">Traditional Pastry</div>
</div>

在图像悬停css上的文本幻灯片

1 个答案: