Есть блок, в котором еще 3 блока, при наводе мышкой отступ увеличивается и смещает рядом стоящие блоки, + увеличивает высоту основного блока, как это обойти?
Пример: jsfiddle
.circle_help_block p{
text-align: center;
color:black;
}
.inner_help{
flex-direction: row;
display: flex;
align-items: center;
justify-content: flex-start;
position: relative;
}
.top_content_block{
overflow: hidden;
}
.help_block{
width:100%;
background: #77AB48 url("<?php echo get_template_directory_uri(); ?>/images/dark_dotted2.png");
background-blend-mode: soft-light;
opacity: 0.7;
}
.icon_help_block{
position: relative;
padding-top: 3em;
padding-bottom: 3.25em;
max-width: 743px;
margin: 0 auto;
padding: 50px 0;
}
.icon_help{
border: 1px solid black;
border-radius: 100px;
padding: 10px;
background-color: white;
margin: 0px 68px;
-webkit-box-shadow: 0 2px 14px rgba(0,0,0,0.4);
box-shadow: 0 2px 14px rgba(0,0,0,0.4);
cursor:pointer;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
background: -webkit-linear-gradient(330deg, #ffb3a6 0%, #ff6a51 100%);
background: -moz-linear-gradient(330deg, #ffb3a6 0%, #ff6a51 100%);
background: -o-linear-gradient(330deg, #ffb3a6 0%, #ff6a51 100%);
background: -ms-linear-gradient(330deg, #ffb3a6 0%, #ff6a51 100%);
background: linear-gradient(120deg, #ffb3a6 13%, #ff6a51 60%);
}
.get_home{
padding: 25px;
}
.get_home img{
width:80px!important;
}
.circle_help_block:hover .get_home{
padding:30px!important;
}
.circle_help_block:hover .icon_help{
padding:15px;
}
.icon_help img{
width:64px;
}
<div class="help_block">
<div class="icon_help_block">
<div class="inner_help">
<div class="circle_help_block food_click">
<div class="icon_help">
<img src="http://icons.iconarchive.com/icons/iconka/meow/128/cat-poo-icon.png" alt="bone">
</div>
<p>Кормить</p>
</div>
<div class="circle_help_block">
<div class="icon_help">
<img src="http://icons.iconarchive.com/icons/iconka/meow/128/cat-poo-icon.png" alt="leash">
</div>
<p>Адоптировать</p>
</div>
<div class="circle_help_block">
<div class="icon_help get_home">
<img src="http://icons.iconarchive.com/icons/iconka/meow/128/cat-poo-icon.png" alt="love-dog">
</div>
<p>Взять домой</p>
</div>
</div>
</div>
</div><!-- END HELP BLOCK -->