2

Есть блок, в котором еще 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 -->

2 ответа 2

4

При наведении указателя блок увеличивается в размерах, добавляя 5px к значению свойства padding. Чтобы не трогать соседей, нужно одновременно уменьшить margin на те же 5px. Например, добавить строчку margin: -5px 63px; к .circle_help_block:hover .get_home и .circle_help_block:hover .icon_help:

.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 {
  background: -webkit-linear-gradient(330deg, #ffb3a6 0%, #ff6a51 100%);
  background:    -moz-linear-gradient(330deg, #ffb3a6 0%, #ff6a51 100%);
  background:     -ms-linear-gradient(330deg, #ffb3a6 0%, #ff6a51 100%);
  background:      -o-linear-gradient(330deg, #ffb3a6 0%, #ff6a51 100%);
  background:         linear-gradient(120deg, #ffb3a6 13%, #ff6a51 60%);
  background-color: white;
  border: 1px solid black;
  border-radius: 100px;
  cursor: pointer;
  margin: 0px 68px;
  padding: 10px;
  -webkit-box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
          box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
.get_home {
  padding: 25px;
}
.get_home img {
  width: 80px!important;
}
.circle_help_block:hover .get_home {
  margin: -5px 63px;
  padding: 30px!important;
}
.circle_help_block:hover .icon_help {
  margin: -5px 63px;
  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 -->

PS. Обратите внимание, что у вас рассогласованы параметры градиента для разных браузеров:

.icon_help {
  background: -webkit-linear-gradient(330deg, #ffb3a6 0%, #ff6a51 100%);
  background:    -moz-linear-gradient(330deg, #ffb3a6 0%, #ff6a51 100%);
  background:     -ms-linear-gradient(330deg, #ffb3a6 0%, #ff6a51 100%);
  background:      -o-linear-gradient(330deg, #ffb3a6 0%, #ff6a51 100%);
  background:         linear-gradient(120deg, #ffb3a6 13%, #ff6a51 60%);
3

Если вам не принципиально нужен padding при наведении мыши, то попробуйте трансформацию масштабирования ( transform: scale() ). Пример в песочнице

.circle_help_block:hover .icon_help{
    transform: scale(1.1);
}
.circle_help_block:hover .get_home{
    transform: scale(1.2);
}
1
  • 1
    transform плох тем, что в таких браузерах как webkit блюрятся изображения
    – Doofy
    5 июл 2016 в 7:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.