I want to create the following hover effect: with hover one div (.left) should expand to full width and cover another div (.right) .

This is what I have done so far: 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>

Explanation / Requirements:

The image has a 1: 1 aspect ratio. The height of the div .container should determine the height of the image, which, in turn, should be 33% wide of the div .container.

Problems

Why does the image move down, although its z-index set to -1 ?

I tried several different approaches that I found on the Internet, but they do not work in my case.

For example, I do not want to set the position of the div .right to position: absolute , because I ignore the filling of the div .container .

How can I solve this problem?

1 answer 1

Consider a negative margin to avoid moving the image to the next line. You can also simplify your code using flexbox instead of float , and you no longer need the JS code to set the height:

 .container { width: 100%; display:flex; flex-wrap:wrap; /*it will work even wrap enabled*/ } .left { width: 67%; background: rgba(0,0,255,0.8); transition:1s; } .right { width: 33%; z-index:-1; } img { max-width: 100%; height: auto; margin: 0; display:block; } .container:hover .left { margin-right:-33%; width:100%; } 
 <div class="container"> <div class="left"> </div> <div class="right"> <img src="https://res.cloudinary.com/ddofbxz8d/image/upload/v1548087392/ka6fgbjakjeskramtkew.jpg"> </div> </div>