Текст поверх изображений с горизонтальной прокруткой - PullRequest
Новая
       0

Текст поверх изображений с горизонтальной прокруткой

0 голосов
/ 05 марта 2020

Я редактирую обнаруженный мной код, который использует переполнение, чтобы расположить изображения так, чтобы их можно было прокручивать по горизонтали. В первую очередь планируется использовать это на веб-странице, когда ширина экрана становится меньше (mobile et c). Это последняя функция, которую я могу установить для этого указанного c кода на веб-странице, поэтому нет необходимости кодировать его в.

Но. То, что я изо всех сил пытаюсь выяснить, состоит в том, как поместить текст поверх (не сверху) изображений. Другими словами, где находится детское лицо Йоды (отредактировано после вопроса о разъяснении). В частности, текст над отдельными изображениями, который остается в пределах границ изображения.

Я не очень знаком с html / css, поэтому, если кто-то знает ответ, он будет признателен, если они добавят пример. (отредактировано после вопроса о разъяснении)

У меня нет текстовых элементов в коде, потому что я думаю, что я был довольно далеко от решения моих собственных усилий. Поэтому я оставил это, чтобы немного очистить код.

Мой пример JSFiddle Обновлен с "рабочим" примером. Но я не совсем уверен, почему это работает, и, может быть (вполне определенно) в нем есть ненужное кодирование. 

.scrolling-wrapper {
  overflow-x: visible;
  overflow-y: hidden;
  white-space: nowrap;
  height: 360px;
}

.card {
  display: inline-block;
}
<div class='scrolling-wrapper'>
  <div class='card'>
    <a href='https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'> <img height=3 50px; src='https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'>
    </a>
  </div>
  <div class='card'>
    <a href='https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'> <img height=3 50px; src='https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'>
    </a>
  </div>
  <div class='card'>
    <a href='https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'> <img height=3 50px; src='https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'>
    </a>
  </div>
</div>

Если код немного запутан, я заранее извиняюсь.

1 Ответ

0 голосов
/ 05 марта 2020

Может быть, вы можете попробовать это:

Вы должны добавить класс, который должен определять позицию этого текста. В этом случае, я думаю, что «липкий» текст может быть хорошим, но вы должны добавить z-индекс: 1000.

trying some stuff on my localhost

top: 0% = верх элемента. top: (50% - element.height); Пример: [наверх: 40%; высота: 10%;] 

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>

            .scrolling-wrapper {
              overflow-x: visible;
              overflow-y: hidden;
              /*white-space: nowrap;*/
              height: 360px;
            }
            .card {
                display: inline-block;
                height: 100%;
                width: 33%;
            }           
            .text{
                 position: sticky;
                 top: 25%;
                 width: 100%;
                 height: 0px;
                 margin: 0 auto;
                 text-align: center;
                 z-index: 100;       
            }

            .text p{
                width:60%;
                margin: 0px auto;
                padding:1em;
                background-color: white;
            }

            .text:hover{
                background-color: aquamarine;
            }

        </style>
    </head>
    <body>

    <div class='scrolling-wrapper'>
        <div class='card'>
            <a href='https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'>
                <div class="text"><p>Your text here...Your text here...Your text here...Your text here...Your text here...Your text here...Your text here...Your text here...</p></div>
                <img height = 350px; src='https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'>
            </a>
        </div>
        <div class='card'>
            <a href='https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'>
                <div class="text"><p>Your text here...Your text here...Your text here...Your text here...Your text here...Your text here...</p></div>
                <img height = 350px; src='https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'>
            </a>
        </div>
        <div class='card'>
            <a href='https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'>
                <div class="text"><p>Your text here...</p></div>
                <img height = 350px; src='https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'>
            </a>
        </div>
    </div>

    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...