Question

我试图在悬停时在图像上显示文本。我尝试遵循此guide，但没有设法将其转换为我的项目。我可以制作一个叠加层，但是那一定是固定的叠加层，我想拥有它，以便在分辨率改变时也可以改变。我希望覆盖层的大小与Thumbmail一样。

HTML：

  <div class="col-md-6 col-sm-2">
  {% for phone in phones %}
  <div class="llol col-md-8 col-md-2">
      <a href="{{ url_for('phones.phone', id=phone.id) }}" class="thumbnail">
        <img src="{{ url_for('static', filename='phone_pics/' + phone.image) }}" alt="" class="cus-img">
      {% if phone.stock == 0 %}
      <div class="overlayOUT">
          <div class="textOUT">OUT OF STOCK!</div>
      </div>

      </a>
      {% else %}
      </a>
      {% endif %}
      <p style="text-align: center;"><b>{{phone.brand.name}}</b> <span style="color: #006666;">{{phone.model}}</span><span class="badge">{{phone.stock}}</span></p>
  </div>
  {% endfor %}
</div>

CSS：

    .thumbnail img{
    height:240px;
    width:100%; 
    }
    .overlayOUT{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: 15px;
    height: 250px;
    width: 183px;
    opacity: 0.8;}

    .textOUT{
    color: white;
    padding: auto;
    font-size: 20px;
    position: absolute;
    top: 48%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: #FA8072;  
    }

Answer 1

只需在display: none;中添加.textOUT道具

.textOUT{
    color: white;
    padding: auto;
    font-size: 20px;
    position: absolute;
    top: 48%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: #FA8072;  
    display: none;
}

并添加悬停CSS，希望它能对您有所帮助。谢谢

.thumbnail:hover .textOUT{
    display: block;
}

Answer 2

最简单的方法是简单地为文本创建一个容器，将其不透明度设置为0，并在悬停事件上将不透明度更改为1。您没有使用普通的HTML，并且我无权访问您的变量，因此我制作了一个可以用相同方式实现的示例。

.container类正在设置图像和隐藏文本容器的位置。然后，只需将.text-container类设置为位于图像顶部，并在该类上设置一个悬停事件即可将其从0不透明度更改为1。

.container {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 400px;
  height: 300px;
}

img {
  width: 100%;
  height: 100%;
}

.text-container {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  transition: all 0.4s ease-in-out 0s;
}

.text-container:hover {
  opacity: 1;
}

.text {
  text-align: center;
  position: relative;
  top: 50%;
}

<div class="container">
  <img src="https://www.romanticasheville.com/sites/default/files/images/basic_page/Asheville_Waterfalls.jpg">
  <div class="text-container">
    <div class="text">Beautiful Waterfall</div>
  </div>
</div>

您可以了解多种将图片悬停在图片here上的方法。

在图像上显示文本

2 个答案: