1

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

.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>

1 ответ 1

0

Добавил обвертку .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>

Ваш ответ

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

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