expand div and covering other div - html

Question

Anyone can help me figure out how to do this. I'm trying to expand the div when hover, but I cannot expand it from center for the b and c div, and d from right, and I trying to overlay the other div when expand instead of pushing it.
The transform:scale() method cannot be use, because I will change the background with image later. I also trying to avoid using jQuery. Thanks in advance.
body {
background-color: grey;
margin: 0;
padding: 0;
}
.displaybox {
background-color: pink;
width: 100%;
height: 500px;
z-index: -1;
}
.box1, .box2, .box3, .box4 {
width: 25%;
height: inherit;
display: block;
float: left;
z-index: 1;
}
.box1 {
background-color: green;
}
.box2 {
background-color: blue;
}
.box3 {
background-color: red;
}
.box4 {
background-color: purple;
}
.box1:hover, .box2:hover, .box3:hover, .box4:hover {
width:100%;
z-index: 0;
transition: 1s ease;
}
<div class="displaybox">
<div class="box1">a</div>
<div class="box2">b</div>
<div class="box3">c</div>
<div class="box4">d</div>
</div>

Answer 1

You can do this with css transitions but I think the mouse out animation is poor as it loses it's z-index too early (so you do not see the right side animating backwards):
body {
background-color: grey;
margin: 0;
padding: 0;
}
.displaybox {
display:flex;
background-color: pink;
width: 100%;
height: 500px;
position: relative;
}
.box {
display: block;
position: absolute;
top: 0;
bottom: 0;
width:25%;
transition: 1s ease;
}
.box:hover {
left: 0;
width:100%;
z-index:1;
}
.box1 {
background-color: green;
left: 0;
}
.box2 {
background-color: blue;
left: 25%;
}
.box3 {
background-color: red;
left: 50%;
}
.box4 {
background-color: purple;
left: 75%;
}
<div class="displaybox">
<div class="box box1">a</div>
<div class="box box2">b</div>
<div class="box box3">c</div>
<div class="box box4">d</div>
</div>
Instead I would probably use a js animation instead (below is a simple jQuery animation):
var $boxes = $('.box');
$boxes.hover(function() {
var $this = $(this);
$this.stop().css('z-index', 2).animate({ // change z-index before animation and animate width to 100 % and move to the left
width: '100%',
left: 0
});
},
function() {
// mouse out animation
var $this = $(this);
$this.stop().css('z-index', 2).animate({ // make highest z-index and shrink back to 25% moving left to original place
width: '25%',
left: $boxes.index($this) * 25 + '%'
}, function() {
$this.css('z-index', 1); // change z-index back after animation
});
});
body {
background-color: grey;
margin: 0;
padding: 0;
}
.displaybox {
display:flex;
background-color: pink;
width: 100%;
height: 500px;
position: relative;
}
.box {
display: block;
position: absolute;
top: 0;
bottom: 0;
width:25%;
}
.box1 {
background-color: green;
left: 0;
}
.box2 {
background-color: blue;
left: 25%;
}
.box3 {
background-color: red;
left: 50%;
}
.box4 {
background-color: purple;
left: 75%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="displaybox">
<div class="box box1">a</div>
<div class="box box2">b</div>
<div class="box box3">c</div>
<div class="box box4">d</div>
</div>

Answer 2

You can achieve the effect with absolute positioning. Setting the left and right values to 0 will make the div expand out to the edges. I used percentages on the left and right values instead of a 25% width and I had to put a higher z-index value on the hover state to get the current div to jump to the front right away.
body {
background-color: grey;
margin: 0;
padding: 0;
}
.displaybox {
background-color: pink;
width: 100%;
height: 500px;
z-index: 0;
}
.box1, .box2, .box3, .box4 {
height: inherit;
z-index: 0;
position: absolute;
transition: 1s ease;
}
.box1 {
background-color: green;
left: 0;
right: 75%;
}
.box2 {
background-color: blue;
left: 25%;
right: 50%;
}
.box3 {
background-color: red;
left: 50%;
right: 25%;
}
.box4 {
background-color: purple;
left: 75%;
right: 0;
}
.box1:hover, .box2:hover, .box3:hover, .box4:hover {
z-index: 10;
left: 0;
right: 0;
}
<div class="displaybox">
<div class="box1">a</div>
<div class="box2">b</div>
<div class="box3">c</div>
<div class="box4">d</div>
</div>

Answer 3

A solution is to animate the background by using a pseudo element overflowing:
body {
background-color: grey;
margin: 0;
padding: 0;
}
.displaybox {
background-color: pink;
width: 100%;
height: 500px;
z-index: -1;
overflow:hidden;
}
.box {
width: 25%;
height: inherit;
display: block;
float: left;
z-index: 1;
position:relative;
background-color:var(--c);
transition:z-index 1s 1s;
}
.box:before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:-1;
background-color:var(--c);
transition:1s left,1s right;
}
.box:hover {
z-index:2;
transition:z-index 0s;
}
.box:hover::before {
left:-100vw;
right:-100vw;
}
<div class="displaybox">
<div class="box box1" style="--c:green">a</div>
<div class="box box2" style="--c:blue">b</div>
<div class="box box3" style="--c:red">c</div>
<div class="box box4" style="--c:purple">d</div>
</div>