@vanya02900
Начинающий программист

Как увеличить текст внутри кнопки-картинки (CSS)?

Учусь делать сайт по шаблону, и надо сделать кнопку (может не кнопку пока не разобрался, но сделал кнопку). Внутри вообщем изображение, а внутри изображения текст. И мне надо чтоб при наведении изображение размывалось и немного увеличивалось (с этим я справился), но возникла другая проблема! Надо чтоб текст тоже при наведении увеличивался, но когда я навожу мышь на картинку анимация картинки происходит, а вот анимация текста нет. И если я я наведусь на текст то текст увеличивается а эффект изображения исчезает. Ну и текст как-то некрасиво увеличивается (скорее всего это из-за margin-top, но vertical-align не работает, и top тоже не работает!), надо чтоб он как бы приподнялся.(Это я сам как нибудь решу, но буду благодарен если скажете почему не работает vertical-align и top)
Вообщем надо синхронизировать анимацию изображения с анимацией текста!

Вообщем вот код

https://codepen.io/vanya02900/pen/dypzpaB

<button class="img_btn_2">
                <img class="img_g" src="static/img/img_2.png" alt="">
                <span>
                    <h5>БЛЮДО ДНЯ</h5>
                    <p>КУРИНЫЕ НОЖКИ НА ГРИЛЕ</p>
                    <p class="icon"><img src="static/img/icons.png" alt=""></p>
                </span>
            </button>


CSS
.img_btn_1, .img_btn_2 {
    position: relative;
    display: inline-block;
    border: none;
    padding: 0;
    overflow: hidden;
}

.img_btn_1 {
    margin-left: 3.65%;
    float: left;
}

.img_btn_2 {
    float: right;
    margin-right: 3.65%;
}

.img_btn_1 img.img_g, .img_btn_2 img.img_g {
    height: 409px;
    width: 543px;
    transition: all 1s ease;
}

.img_btn_1 img.img_g:hover, .img_btn_2 img.img_g:hover {
    filter: blur(1px);
    transition: all 0.5s ease;
    transform: scale(1.2)
}

.img_btn_1 span, .img_btn_2 span {
    position: absolute;
    top: 10px;
    width: 100%;
    left: 0;
}

.img_btn_1 span h5, .img_btn_2 span h5 {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: normal !important;
    margin-top: 30%;
    margin-bottom: 5px !important;
    text-align: center;
    font-family: pfdintextcondpro-regular !important;
}

.img_btn_1 span p, .img_btn_2 span p {
    color: #FFFFFF;
    font-size: 32px !important;
    font-family: pfdintextcondpro-regular !important;
    font-weight: bold !important;
    margin: 0;
    line-height: 30px;
}

.icon {
    padding: 0 !important;
    line-height: 25px;
}


Стили текста я убрал, но там я увеличивал текст с помощью font-size, есть ли другой способ чтоб можно было увеличить в процентах, т.к. два разных размера шрифта, и не хочется каждому прописывать размер

Скрины
5fdfa434150b8468741419.png (Без наведения)
5fdfa459ad1a2570060315.png (Навдение на изображение)
5fdfa46514d9b554943940.png (тут текст увеличивается когда навожусь конкретно на него)

P.S. top заработал, надо было применить её к span
  • Вопрос задан
  • 75 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы