Как написать текст на img?

Question

[a16a]

Всем привет. Как написать поверх цифры на таких бейджов?(Картинка прикреплен)
Чтобы была по центру и возможно с анимацией, как во многих сайтах, когда после прокрутки до этого экрана счетчик крутится до этих цифров.

Comments

[Inspy]

бейджов, Картинка прикреплен, цифров. O_o WTF ?

[a16a]

Inspy: что? А как нужно? я новичок в этой сфере

[Inspy]

a16a: я о вашей грамматике, попахивает google переводчиком :D

[a16a]

Inspy: аа да, русский не мой родной язык)

[a16a]

Вот такой код блока. если что

<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                    <img src="img/badge.png" alt="" wight="80px" height="80px">
                    <div class="clearfix"></div>
                    <div class="p1">
                        <p>10</p>
                        <p>Лет успешной работы</p>
                    </div>
                </div>

Answer 1

[Егор Живагин]

<p class='class'>10</p>
CSS

.col-lg-2 { position: relative; }
.class { position: absolute; top: 40px; left: 40px; transform: translate (-50%, -50%); }

Названия классов лучше задавать свои, конечно.

PS - Забыл. Для .class обнулить margin-bottom

Comments

[a16a]

Немножко криво, но я исправил. Идея верная. Спасибо

[Егор Живагин]

a16a: да не за что

[a16a]

Krasnodar_etc: хехе блин)
я вот так поставил
-----
.about { position: relative; }
.aboutus {
font-family: 'Open Sans', sans-serif;
color: #ff3300;
font-weight: 700;
font-size: 30px;
margin-bottom: 0;
position: absolute;
top: 64px; left: 84px;
transform: translate(-50%, -50%);
}
----
когда разрешение уменьшаешь, тексты плавают)

[Егор Живагин]

a16a: это бы на https://codepen.io/ , тогда помочь - вообще проблем.

[a16a]

Krasnodar_etc: codepen.io/anon/pen/EZEjpY вот может так

[Егор Живагин]

a16a: Если это ещё актуально и проблема не решена - я заменил left и top на 50% и всё стало отлично вплоть до телефонного расширения экрана (примерно). Там начинает съезжать, поскольку у вас картинка больше, чем бутстраповский блок, в котором она лежит.