css shift effect on hover - css

Question

I'm trying to create a css effect on hover but that's don't work. I would like that the grey div don't move.
I use bootstrap 3 for the grid with 24px for the gutter (12px on each side).
This effect must be compatible with IE8.
Can I have some help please ?
.bgd-effect {
position: absolute;
height: 100%;
display: block;
left: 12px;
right: 12px;
background-color: blue;
z-index: 1;
}
.bgd-effect:hover {
left: 17px;
right: 8px;
}

Answer 1

Judging by the image you have used for your question the solution below is a simple one that will work on multiple different browser's.
CHECK IT OUT HERE: http://codepen.io/jacobg182/pen/Vvebxy
Simply add the following css using a pseudo hover effect:
.div:hover {
cursor: pointer;
-moz-box-shadow: 8px 15px 0px #00C2F1;
-webkit-box-shadow: 8px 15px 0px #00C2F1;
box-shadow: 8px 15px 0px #00C2F1;
-webkit-transition: all 500ms ease;
}
Also be sure to add a transition to the div without the pseudo hover state (Just to slow it down so it looks better)
.div {
transition: all 0.8s ease;
}

Answer 2

According to caniuse, you can use a pseudo element to create a copy and put it in the back.
.bgd-effect {
height: 100px;
width: 100px;
display: block;
background-color: black;
z-index: 2;
position:relative;
}
.bgd-effect:before {
content:"";
width:inherit;
height:inherit;
top:0;
left:0;
right:0;
bottom:0;
background-color: blue;
z-index:1;
position:absolute;
}
.bgd-effect:hover:before{
margin:10px;
}