z-index on hover with bootstrap img-responsive class - html

Question

Newb here. I am building a site, and on this site I am displaying overlapping images. Therefore, I am using the z-index on hover so that the behind image comes forward when hovered over. However, I am also using bootstrap and the img-responsive tag and when I hover, the image flickers and then disappears. How can I fix this? Is it possible to handle this in only HTML/CSS, no Java?
#container1 {
position: absolute;
top: 25%;
left: 35%;
}
#container1 img:hover {
z-index: 3;
position: absolute;
}
#container2 {
position: absolute;
top: 30%;
left: 25%;
}
#container2 img:hover {
z-index: 2;
position: absolute;
}
#container3 {
position: absolute;
top: 45%;
left: 40%;
}
#container3 img:hover {
z-index: 1;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:100,100italic,300,300italic,500,500italic,700,700italic, 800">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Philesq</a>
</div>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="nav navbar-nav navbar-right">
<li>works
</li>
<li>about
</li>
<li>contact
</li>
</ul>
</div>
</div>
</nav>
<div id="container">
<div id="container1">
<img src="http://placehold.it/300x300?text=1" class="img-responsive">
</div>
<div id="container2">
<img src="http://placehold.it/300x300?text=2" class="img-responsive">
</div>
<div id="container3">
<img src="http://placehold.it/300x300?text=3" class="img-responsive">
</div>
<div>

Answer 1

I there.
The reason why the images flickers is because you are setting the images to be position absolute on hover and it has a static position by default.
If you set alle the images to be position relative from the beginning, and also removes the position attribute on hover, it will work. You do not need position absolute on the images because you have it on the parent container. (unless you are trying to do more I don't know of)
Hope this helps :)
Se working example here
#container1 img, #container2 img, #container3 img{
position: relative; /* Added this */
border: 1px solid red;
}
#container1 {
position: absolute;
top: 25%;
left: 35%;
}
#container1 img:hover {
z-index: 3;
/* Removed: position: absolute; */
}
#container2 {
position: absolute;
top: 30%;
left: 25%;
}
#container2 img:hover {
z-index: 2;
}
#container3 {
position: absolute;
top: 45%;
left: 40%;
}
#container3 img:hover {
z-index: 1;
}