如何在图像悬停时显示文本而不是文本悬停 - CSS/SASS

Question

我确信这是一个简单的修复，但我无法理解我做错了什么。我试图在悬停图像时显示 'title-text' 并降低图像的不透明度。我降低了图像不透明度，但似乎无法显示文本，除非我直接悬停文本。任何帮助，将不胜感激！谢谢

#work {
  .items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;

    .item {
      position: relative;
      background: $dark-color;
      // overflow: hidden;

      &:after {
        content: '';
        position: absolute;
        display: block;
        background: inherit;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      // bring in main color overlay
      &:hover:after {
        opacity: 0.3;
      }

      &-text {
        position: absolute;
        top: 50%;
        left: 0;
        bottom: 0;
        right: 0;
        opacity: 0;
        text-align: center;
        z-index: 1;
        color: #fff;
      }

      // bring in text on hover
      &-image:hover &-text {
        opacity: 1;
      }

      &-image:before {
        content: '';
        display: block;
        padding-top: 75%;
        overflow: hidden;
      }

      &-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        line-height: 0;
      }
    }
  }

Answer 1

如果我对你的理解正确，你试图做的事情不能单独用 HTML/CSS 完成。您将不得不使用 JavaScript 来获得这种效果。

这是一个使用 jQuery 的示例，它在悬停时将 class .darken 添加到 .item。如果不重写代码，这对你的情况不起作用，但你明白了。您当然可以在这两个函数中添加任何内容：

<script>
    (function(){
        jQuery(".item").hover(
            function() {
                jQuery(this).addClass('darken');
            }, function() {
                jQuery(this).removeClass('darken');
            }
        );
    })();
</script>

Answer 2

我想你可以将图片和文字包裹在 div:

<div class="wrapper">
    <img src="image.jpg">
    <p>Your Title</p>
</div>

<style>
    .wrapper {
        position: relative;
        overflow: hidden;
    }
    .wrapper img {
        display: block;
        max-width: 100%;
        line-height: 0;
    }
    .wrapper p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        z-index: 2;
    }
    .wrapper:hover img {
        opacity: 0.6;
    }
    .wrapper:hover p {
        opacity: 1;
    }
</style>

如何在图像悬停时显示文本而不是文本悬停 - CSS/SASS

How to show text on image hover rather than text hover - CSS/SASS

html

css

sass

hover