Как вытащить объект на левую сторону из div (класс «карта») - PullRequest
Новая
       8

Как вытащить объект на левую сторону из div (класс «карта»)

0 голосов
/ 28 сентября 2018

это то, что у меня есть enter image description here

и это то, что я должен сделать enter image description here

я знаю, каксоздать "зависание", но не понимаю, как добавить эти цифры, которые тянутся слева от карты!это мой HTML 

            <li>
                <div uk-parallax="opacity: 0,1; y: 100,0; viewport: 0.3"
                     class="uk-card uk-card-hover uk-card-small uk-card-body">
                    <h3 class="uk-card-title">HOW THE PRICE CALCULATED</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.</p>
                </div>
            </li>
            <li>
                <div uk-parallax="opacity: 0,1; y: 100,0; viewport: 0.5"
                     class="uk-card uk-card-hover uk-card-small uk-card-body">
                    <h3 class="uk-card-title">HOW THE PRICE CALCULATED</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua.</p>
                </div>
            </li>

Кстати, я использую CSS-фреймворк с именем UIkit 3, может быть, это может как-то помочь ... Спасибо!

1 Ответ

0 голосов
/ 28 сентября 2018

Вам нужно будет сделать несколько пользовательских CSS, но это может быть выполнено с помощью счетчиков CSS + перед псевдоэлементом, например, так: 

ol {
  list-style: none;
  counter-reset: mycounter;
  padding-left: 50px;
}

li {
  counter-increment: mycounter;
  position: relative;
}

li:hover {
  background-color: #efefef;
}

li::before {
  content: counter(mycounter);
  position: absolute;
  left: -30px;
  font-size: 72px;
}

li:hover::before {
  color: rgb(0,100,255);
  font-size: 96px;
  left: -40px;
  top: -5px;
}

Здесь это на codepen (с немного большей стилевойближе к вашему макету):

https://codepen.io/jcatt/pen/jeOQaO?editors=1100

И вот руководство по выполнению такого рода вещей:

https://css -tricks.com/ заказ список номер стайлинг /

...