Как отображать текст при наведении изображения, а не при наведении текста - CSS / SASS - PullRequest
Новая
       53

Как отображать текст при наведении изображения, а не при наведении текста - CSS / SASS

0 голосов
/ 18 апреля 2020

Я уверен, что это простое решение, но я не могу понять, что я делаю неправильно. Я пытаюсь показать текст заголовка, а также уменьшить непрозрачность изображения при наведении на изображение. У меня есть уменьшение непрозрачности изображения, но я не могу сделать так, чтобы текст отображался, пока я не наведу текст. Любая помощь будет оценена! Спасибо 

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

Ответы [ 2 ]

1 голос
/ 18 апреля 2020

Я думаю, вы можете обернуть изображение и текст в 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>
0 голосов
/ 18 апреля 2020

Если я вас правильно понимаю, то, что вы пытаетесь сделать, не может быть сделано только с помощью HTML / CSS. Для такого эффекта вам придется использовать JavaScript.

Вот пример использования jQuery, который добавляет класс .darken к .item при наведении курсора. Это не будет работать в вашем случае без переписывания кода, но вы поняли идею. Конечно, вы можете добавить все что угодно в эти две функции: 

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