Как заставить мой текст придерживаться отзывчивого div? - PullRequest
Новая
       4

Как заставить мой текст придерживаться отзывчивого div?

0 голосов
/ 12 октября 2019

У меня проблемы с тем, чтобы мой текст прилипал к адаптивным изображениям, как это: https://cloud.screenpresso.com/S8N5c/2019-10-11_16h25_59.png

Я попытался изменить position в CSS.

Вы можете проверить мой исходный код в https://eylenkim.github.io/ArtByEylen/

Когда вы перетаскиваете экран, текст также удаляется от отзывчивых изображений.

Но вот фрагмент: ``` HTML 

    <div class="container">
      <div class="row">

      <div class="one-half column u-pull-left">
        <a href="Shop/shop.html">
          <img data-sr class="homeReveal u-max-full-width duo-pic" src="photo/artbyeylen13.JPG">

          <div class="overlap-text">
            <div class="overlap-text-outline">
              <h2 class="load">Enter Shop</h2>
            </div>
            <div class="overlap-text-base">
              <h2 class="load">Enter Shop</h2>
            </div>
          </div>

        </a>
      </div>

      <div class="one-half column u-pull-right">
        <a href="Portfolio/portfolio.html">
          <img data-sr class="homeReveal u-max-full-width duo-pic" src="photo/artbyeylen11.JPG">

        <div class="overlap-text">
          <div class="overlap-text-outline">
            <h2 class="load">Portfolio</h2>
          </div>
          <div class="overlap-text-base">
            <h2 class="load">Portfolio</h2>
          </div>
        </div>

        </a>
      </div>

      </div>
    </div>
  </section> 

```

    .overlap-text h2{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        opacity: 1;
        letter-spacing: .1px;
        text-align: left;
    }

    .overlap-text.is_active h2{
      transform: translateY(-25%) scale(1.15);
      top:45%;
    }


    .overlap-text-outline h2{
      font-family:'GT-America-Extended-Black';
      font-weight: 800;
      font-style: normal;
      color: transparent;
      -webkit-text-stroke: 1.4px #fff;
      z-index: 7;
      font-size: calc(5em + 1vw);
    }

    .overlap-text-base h2{
      font-family:'GT-America-Extended-Black';
      font-weight: 800;
      font-style: normal;
      color: rgba(255,255,255,0.9);
      background-clip: text;
      -webkit-background-clip: text;
      background-image: url(otherCss/noise.gif);
      -webkit-text-stroke: none;
      z-index: -4;
      font-size: calc(5em + 1vw);

      -moz-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      -webkit-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    ```
...