时间戳

首页 > 解决方案 > 悬停功能和渲染无法按预期工作以覆盖图像

css - 悬停功能和渲染无法按预期工作以覆盖图像

问题描述

我希望我的图像在悬停时显示覆盖 1. 大小/尺寸相同 2. 具有不透明度的 bg 颜色和 3. 显示文本。我正在使用下面的 CSS，但默认情况下会显示覆盖（my-work-overlay）类，没有悬停活动，即使我的父 div 'my-work-preview' 应该是。在页面上提供我的自定义 CCS + html。

我多次检查了我的类名，并且代码看起来对我来说是正确的，my-work-overlay 默认显示而不是悬停。

CSS

.my-work-preview {
      position: relative;
      width: 100%;
    }
    .my-work-image {
      display: block;
      width: 100%;
      height: auto;
     border-radius: 25px;
    }
    .my-work-overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0.8;
      transition: .5s ease;
      background-color: #000000;
       border-radius: 25px;
    }
    .my-work-preview:hover .my-work-overlay {
      opacity: .8; border-radius: 25px;
    }
    .my-work-text {
      color: white;
      font-size: 20px;
      font-family: sofia-pro;
      font-style: bold;
      position: relative;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
    }
    <a href="http://www.theyummyheart.com" target="_blank">
          <div class="my-work-preview">
        <img src="https://static1.squarespace.com/static/5d35e760a6e4d600012adfba/t/5d72a84d4d671305694b4763/1567795869852/the-yummy-heart-preview.png?format=500w" alt="The Yummy Heart Preview" class="my-work-image">
          <div class="my-work-overlay">
            <div class="my-work-text"><h3>
              The Yummy Heart
              </h3>Web Design<br>Copy Editing<br>SEO</div>
          </div>
          </div></a>

标签： css

解决方案

您已将 opacity 设置opacity: 0.8;为 上的默认属性div.my-work-preview，这会导致悬停不起作用，禁用不透明度或将其值更改为其他值，将解决悬停无法正常工作的问题。

.my-work-preview {
      position: relative;
      width: 100%;
    }
    .my-work-image {
      display: block;
      width: 100%;
      height: auto;
     border-radius: 25px;
    }
    .my-work-overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: #000000;
       border-radius: 25px;
    }
    .my-work-preview:hover .my-work-overlay {
      opacity: .8; border-radius: 25px;
    }
    .my-work-text {
      color: white;
      font-size: 20px;
      font-family: sofia-pro;
      font-style: bold;
      position: relative;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      text-align: center;
    }
    <a href="http://www.theyummyheart.com" target="_blank">
          <div class="my-work-preview">
        <img src="https://static1.squarespace.com/static/5d35e760a6e4d600012adfba/t/5d72a84d4d671305694b4763/1567795869852/the-yummy-heart-preview.png?format=500w" alt="The Yummy Heart Preview" class="my-work-image">
          <div class="my-work-overlay">
            <div class="my-work-text"><h3>
              The Yummy Heart
              </h3>Web Design<br>Copy Editing<br>SEO</div>
          </div>
          </div></a>

推荐阅读