При наведении на блок съезжают нижние, а надо чтоб он перекрывал собой остальные. Как можно сделать?
.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>