PeMaCN PeMaCN - 3 months ago 24
CSS Question

Bootstrap divs not stacking right

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

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>