Как с hover двигать родительский блок с вложенными?

Рома Никитин разместил пост 5 дней назад

Например есть блок с картинкой, а поверх текст, как сделать что бы при наведении двигался текст с картинкой вместе, монолитно?

Петр Алексеевич разместил пост 5 дней назад

Прежде чем задавать вопрос, попробуй погуглить)

.tour {
   
display: inline-flex;
   
position: relative;
   
margin: 10px;
   
width: 347px;
}

.
tour img {
   
width: 347px;
   
height: 216px;
   
border-radius: 10px;
   
-moz-transition: all 1s ease-out;
   
-o-transition: all 1s ease-out;
   
-webkit-transition: all 1s ease-out;
}
.
tour div {
   
position: absolute;
   
bottom: 189px;
   
left: 0px;
   
background-color: #5ec3efb5;
   
padding: 5px 5px 5px 10px;
   
color: white;
   
border-top-left-radius: 11px;
   
border-top-right-radius: 11px;
   
font-size: 18px;
   
text-align: center;
   
width: 100%;
}

.
tour {width: 347px;
   
border-radius: 10px;
   
-moz-transition: all 1s ease-out;
   
-o-transition: all 1s ease-out;
   
-webkit-transition: all 1s ease-out;
}

.
tour:hover  {
   
-webkit-transform: scale(1.1);
   
-moz-transform: scale(1.1);
   
-o-transform: scale(1.1);
}

 

 

<div class="tour"><a href="#">
    <img
src="http://pantouristic.ru/wp-content/uploads/2018/03/турк.jpg" /></a>

    <div>
Горящие туры в Турцию </div></a>
</div>

Close