Я хочу создать следующий эффект наведения: при hover
один div (.left)
должен расширяться до полной ширины и покрывать другой div (.right)
.
Это то, что я до сих пор сделал: https://jsfiddle.net/Kubismus/tcm8nzu2/4/
$(".container").css({'height':($("img").height()+'px')});
.container {
width: 100%;
}
.left {
width: 67%;
height: 100%;
background: blue;
float: left;
}
.right {
width: 33%;
height: 100%;
float: right;
z-index: -1;
}
img {
max-width: 100%;
height: auto;
margin: 0;
}
.container:hover .left {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="left">
</div>
<div class="right">
<img src="https://res.cloudinary.com/ddofbxz8d/image/upload/v1548087392/ka6fgbjakjeskramtkew.jpg">
</div>
</div>
Объяснение / Требования:
Изображение имеет соотношение сторон 1:1. Высота div .container
должна определять высоту изображения, которое, в свою очередь, должно иметь ширину 33% от div .container.
Проблемы
Почему изображение сдвигается вниз, хотя его z-index
установлен в -1
?
Я пробовал несколько разных подходов, которые нашел в Интернете, но они не работают в моем случае.
Например, я не хочу устанавливать позицию div .right
в position: absolute
, поскольку я игнорирую заполнение div .container
.
Как я могу решить эту проблему?
Свободный перевод вопроса html - hover effect: make div flow above another div от участника @newman.