I am facing a challenge with overlaying two divs on top of an image. My objective is to create a simple lightbox where when the user hovers over the left or right side, the cursor changes to a pointer and arrows appear. Below is the code I am using:
HTML:
<div class="container">
<img src="http://dummyimage.com/600x600/000/fff.jpg">
<div class="left">
</div>
<div class="right">
</div>
</div>
CSS:
.container {
position: fixed;
top: 50%;
left: 50%;
width: 600px;
height: 600px;
margin-top: -300px;
margin-left: -300px;
background-color: lightgrey;
z-index: 10000;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100%;
cursor: pointer;
z-index: 10500;
}
.left:hover {
background: rgba(248, 248, 248, 0) left center no-repeat url("http://imageshack.com/a/img823/9885/bsux.png");
}
.right {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100%;
cursor: pointer;
z-index: 10500;
}
.right:hover {
background: rgba(248, 248, 248, 0) right center no-repeat url("http://imageshack.com/a/img845/5814/75r3.png");
}
JSFIDDLE: Fiddle
While this setup works smoothly in Chrome and Firefox, it seems to be causing issues in Internet Explorer. Interestingly, if the image is removed, the functionality works fine. What could be causing this problem and how can I resolve it?