Учусь делать сайт по шаблону, и надо сделать кнопку (может не кнопку пока не разобрался, но сделал кнопку). Внутри вообщем изображение, а внутри изображения текст. И мне надо чтоб при наведении изображение размывалось и немного увеличивалось (с этим я справился), но возникла другая проблема! Надо чтоб текст тоже при наведении увеличивался, но когда я навожу мышь на картинку анимация картинки происходит, а вот анимация текста нет. И если я я наведусь на текст то текст увеличивается а эффект изображения исчезает. Ну и текст как-то некрасиво увеличивается (скорее всего это из-за 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, есть ли другой способ чтоб можно было увеличить в процентах, т.к. два разных размера шрифта, и не хочется каждому прописывать размер
Скрины
(Без наведения)
(Навдение на изображение)
(тут текст увеличивается когда навожусь конкретно на него)
P.S. top заработал, надо было применить её к span
