Bootstrap divs not stacking right - html

Question

I have two divs with .container class which are not stacking properly. Instead, they overlap.
This is my code:
HTML
<div id="crossfadingImages" class="container">
<img src="./media/..." class="bottom img-responsive" alt="..."/>
<img src="./media/..." class="top img-responsive" alt="..."/>
</div>
<div id="about" class="container">
<div class="row">
<div class="col-sm-6">
<p>about...</p>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
CSS
#crossfadingImages{
position: relative;
width: 100%;
padding: 0;
margin-top: 55px;
}
#crossfadingImages img{
position: absolute;
left: 0;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
}
#crossfadingImages img.top:hover{
opacity: 0;
}
I think the problem is absolute position of images in crossfadingImages div.
Please provide your solution to my problem as well as an explanation.

Answer 1

Then you can you the hover() function
$(document).ready(function() {
$('#crossfadingImages img').hover(function() {
$('#crossfadingImages img:first-child').stop().fadeOut(500);
$('#crossfadingImages img:last-child').stop().fadeIn(500);
},
function() {
$('#crossfadingImages img:first-child').stop().fadeIn(500);
$('#crossfadingImages img:last-child').stop().fadeOut(500);
});
});
#crossfadingImages {
width: 100%;
padding: 0;
margin-top: 55px;
top: 0;
display: block;
}
#crossfadingImages img {
position: absolute;
width: 45%;
left: 0;
}
#crossfadingImages img:last-child {
display: none;
}
#about{
position:relative;
top:80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="crossfadingImages" class="container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bottom img-responsive" alt="..." />
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" class="top img-responsive" alt="..." />
</div>
<div id="about" class="container">
<div class="row">
<div class="col-sm-6">
<p>about...</p>
</div>
<div class="col-sm-6">
</div>
</div>
</div>

Answer 2

Ok, I managed to solve this problem by using only CSS.
NOTE: This will only work if you have two images (JPG or JPEG format) of the same size. If they aren't the same size then the bottom image will be shown all the time cause we are just changing opacity of top image.
#crossfadingImages{
position: relative;
width: 100%;
padding: 0;
margin-top: 55px;
}
#crossfadingImages img{
left: 0;
width: 45%;
-webkit-transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-o-transition: opacity 3s ease-in-out;
transition: opacity 3s ease-in-out;
}
#crossfadingImages img.top:hover{
opacity: 0;
}
.bottom-image{
position: absolute;
}
.top-image{
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="crossfadingImages" class="container">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bottom img-responsive bottom-image" alt="..."/>
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" class="top img-responsive top-image" alt="..."/>
</div>
<div id="about" class="container">
<div class="row">
<div class="col-sm-6">
<p>about...</p>
</div>
<div class="col-sm-6">
</div>
</div>
</div>