How to pull object to the left side out of the div(class "card")

Question

this is what i have

and this is what i have to do

i know how to create "hover" but don't understand how to add this numbers which are pulled to the left OUT of the card! this is my 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>

By the way i am using css framework named UIkit 3, maybe it can help somehow... Thank you!

Answer 1

You'll have to do some custom CSS, but it can be accomplished with CSS counters + before pseudo element, like so:

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

Here it is on codepen (with a little more styling to get it closer to your mockup):

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

And here's a guide to doing this kind of thing:

https://css-tricks.com/custom-list-number-styling/