Смещаются div при использовании hover

143
12 октября 2018, 18:00

При наведении на блок съезжают нижние, а надо чтоб он перекрывал собой остальные. Как можно сделать?

.catalogue-wrapper { 
    float: left; 
    text-align: center; 
    margin-left:10px; 
    margin-top: 25px; 
    width: 205px; /* ширина блока */ 
    height: 300px; /* высота блока */ 
    background: #fff; 
    position: relative; 
    border: 1px solid #b212b766; 
    border-radius: 10px; 
    padding: 15px 13px 5px 10px; 
    -webkit-transition: all 200ms ease-in; 
    -webkit-transform: none; 
    -ms-transition: all 200ms ease-in; 
    -ms-transform: none; 
    -moz-transition: all 200ms ease-in; 
    -moz-transform: none; 
    transition: all 200ms ease-in; 
    transform: none; 
    display: inline-block; 
} 
 
.catalogue-wrapper:hover { 
    border: 3px solid #b212b7a8; 
    box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.18); 
    z-index: 1; 
    -webkit-transition: all 200ms ease-in;  
    -webkit-transform: scale(1.2);  
    -ms-transition: all 200ms ease-in; 
    -ms-transform: scale(1.2); 
    -moz-transition: all 200ms ease-in; 
    -moz-transform: scale(1.2); 
    transition: all 200ms ease-in; 
    transform: scale(1.2); 
    height: 350px; 
 
} 
.catalogue-wrapper .staff_thumb img { 
/*	-webkit-border-radius: 999px;  
	-o-border-radius: 999px;  
  	border-radius: 999px;*/ 
	overflow:hidden; 
	margin-top:10px 
}
<div class="catalogue-wrapper"> 
<div class="staff_thumb"><img src="#" alt="classboards" width="180" height="180"></div> 
<div class="staff_title"><strong>Офисная мебель</strong></div> 
</div> 
<div class="catalogue-wrapper"> 
<div class="staff_thumb"><img src="#" alt="classboards" width="180" height="180"></div> 
<div class="staff_title"><strong>Робототехника</strong></div> 
</div> 
<div class="catalogue-wrapper"> 
<div class="staff_thumb"><img src="#" alt="classboards" width="180" height="180"></div> 
<div class="staff_title"><strong>Аудиторные доски</strong></div> 
</div> 
<div class="catalogue-wrapper"> 
<div class="staff_thumb"><img src="#" alt="detsad" width="180" height="180"></div> 
<div class="staff_title"><strong>Интерактивное оборудование</strong></div> 
</div> 
<div class="catalogue-wrapper"> 
<div class="staff_thumb"><img src="#" alt="myagkiy" width="180" height="180"></div> 
<div class="staff_title"><strong>Спортивное оборудование</strong></div> 
</div> 
<div class="catalogue-wrapper"> 
<div class="staff_thumb"><img src="#" alt="classboards" width="180" height="180"></div> 
<div class="staff_title"><strong>Оборудование для бассейна</strong></div> 
</div> 
<div class="catalogue-wrapper"> 
<div class="staff_thumb"><img src="#" alt="tehnologicheskoe" width="180" height="180"></div> 
<div class="staff_title"><strong>Технологическое 
оборудование</strong></div> 
</div> 
<div class="catalogue-wrapper"> 
<div class="staff_thumb"><img src="#" alt="streetinv" width="180" height="180"></div> 
<div class="staff_title"><strong>Уличное 
оборудование</strong></div> 
</div> 
<div class="catalogue-wrapper"> 
<div class="staff_thumb"><img src="#" alt="interakt" width="180" height="180"></div> 
<div class="staff_title"><strong>Лингнафонные 
кабинеты</strong></div> 
</div>

Answer 1

Добавил обвертку .catalogue-wrapper__in которая имеет свойство position: absolute; и часть свойств от .catalogue-wrapper перекинул на нее. Hover делается теперь на блок .catalogue-wrapper__in.

.catalogue-wrapper { 
    position: relative; 
    float: left; 
    text-align: center; 
    margin-left:10px; 
    margin-top: 25px; 
    width: 205px; /* ширина блока */ 
    height: 300px; /* высота блока */ 
    -webkit-transition: all 200ms ease-in; 
    -webkit-transform: none; 
    -ms-transition: all 200ms ease-in; 
    -ms-transform: none; 
    -moz-transition: all 200ms ease-in; 
    -moz-transform: none; 
    transition: all 200ms ease-in; 
    transform: none; 
    display: inline-block; 
} 
 
.catalogue-wrapper__in:hover { 
    border: 3px solid #b212b7a8; 
    box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.18); 
    z-index: 1; 
    -webkit-transition: all 200ms ease-in;  
    -webkit-transform: scale(1.2);  
    -ms-transition: all 200ms ease-in; 
    -ms-transform: scale(1.2); 
    -moz-transition: all 200ms ease-in; 
    -moz-transform: scale(1.2); 
    transition: all 200ms ease-in; 
    transform: scale(1.2); 
    height: 350px; 
 
} 
 
.catalogue-wrapper__in { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: #ffffff; 
    border: 1px solid #b212b766; 
    border-radius: 10px; 
    padding: 15px 13px 5px 10px; 
} 
 
.catalogue-wrapper .staff_thumb img { 
/*	-webkit-border-radius: 999px;  
	-o-border-radius: 999px;  
  	border-radius: 999px;*/ 
	overflow:hidden; 
	margin-top:10px 
}
<div class="catalogue-wrapper"> 
    <div class="catalogue-wrapper__in"> 
        <div class="staff_thumb"><img src="#" alt="classboards" width="180" height="180"></div> 
        <div class="staff_title"><strong>Офисная мебель</strong></div> 
    </div> 
</div> 
<div class="catalogue-wrapper"> 
    <div class="catalogue-wrapper__in"> 
        <div class="staff_thumb"><img src="#" alt="classboards" width="180" height="180"></div> 
        <div class="staff_title"><strong>Офисная мебель</strong></div> 
    </div> 
</div> 
<div class="catalogue-wrapper"> 
    <div class="catalogue-wrapper__in"> 
        <div class="staff_thumb"><img src="#" alt="classboards" width="180" height="180"></div> 
        <div class="staff_title"><strong>Офисная мебель</strong></div> 
    </div> 
</div> 
<div class="catalogue-wrapper"> 
    <div class="catalogue-wrapper__in"> 
        <div class="staff_thumb"><img src="#" alt="classboards" width="180" height="180"></div> 
        <div class="staff_title"><strong>Офисная мебель</strong></div> 
    </div> 
</div> 
<div class="catalogue-wrapper"> 
    <div class="catalogue-wrapper__in"> 
        <div class="staff_thumb"><img src="#" alt="classboards" width="180" height="180"></div> 
        <div class="staff_title"><strong>Офисная мебель</strong></div> 
    </div> 
</div> 
<div class="catalogue-wrapper"> 
    <div class="catalogue-wrapper__in"> 
        <div class="staff_thumb"><img src="#" alt="classboards" width="180" height="180"></div> 
        <div class="staff_title"><strong>Офисная мебель</strong></div> 
    </div> 
</div> 
<div class="catalogue-wrapper"> 
    <div class="catalogue-wrapper__in"> 
        <div class="staff_thumb"><img src="#" alt="classboards" width="180" height="180"></div> 
        <div class="staff_title"><strong>Офисная мебель</strong></div> 
    </div> 
</div> 
<div class="catalogue-wrapper"> 
    <div class="catalogue-wrapper__in"> 
        <div class="staff_thumb"><img src="#" alt="classboards" width="180" height="180"></div> 
        <div class="staff_title"><strong>Офисная мебель</strong></div> 
    </div> 
</div> 
<div class="catalogue-wrapper"> 
    <div class="catalogue-wrapper__in"> 
        <div class="staff_thumb"><img src="#" alt="classboards" width="180" height="180"></div> 
        <div class="staff_title"><strong>Офисная мебель</strong></div> 
    </div> 
</div> 
<div class="catalogue-wrapper"> 
    <div class="catalogue-wrapper__in"> 
        <div class="staff_thumb"><img src="#" alt="classboards" width="180" height="180"></div> 
        <div class="staff_title"><strong>Офисная мебель</strong></div> 
    </div> 
</div>

READ ALSO
Передача аргумента скрипту в HTML
HTML

Передача аргумента скрипту в HTML

Есть поле ввода кода и кнопка ДобавитьКнопка берет значение с поля ввода, а как сделать так, чтобы отдельная кнопка передавала свое значение?...

 201
Обернуть каждое слово в тег
HTML

Обернуть каждое слово в тег

Возможно ли обернуть каждое слово по отдельности в тег ? На примере текста : Cras ultricies ligula sed magna dictum porta только что бы каждое слово было по отдельности...

 180
Не могу разбить блок &lt;div&gt; на две равных части для моего контента
HTML

Не могу разбить блок <div> на две равных части для моего контента

Верстаю блок в котором нужно 2 блокаПервый для полей регистрации, второй для картинки

 156
При загрузке страницы скрипт ведет себя по-разному
HTML

При загрузке страницы скрипт ведет себя по-разному

Есть скрипт, который должен имитировать background-size: cover при работе с img в произвольном блокеСкрипт высчитывает соотношение сторон блока-обертки...

 176