ブートストラップdivsは積み重ねられません

Question

.containerクラスの2つのdivが正しく積み重ねられていません。代わりに、重複します。

これは私のコードです：

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; 
} 

私はこの問題はcrossfadingImages divの中の画像の絶対位置だと思います。 あなたの解決策を私の問題に加えて説明してください。

Answer 1

は、次に、あなたhover()機能

$(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]を、私はCSSを使って、この問題を解決するために管理することができます。

注：これは、同じサイズの2つの画像（JPGまたはJPEG形式）がある場合にのみ機能します。それらのサイズが同じでない場合は、最上部の画像の不透明度を変更しているため、常に下部の画像が表示されます。

#crossfadingImages{ 
 
\t position: relative; 
 
\t width: 100%; 
 
\t padding: 0; 
 
\t margin-top: 55px; 
 
} 
 
#crossfadingImages img{ 
 
\t left: 0; 
 
     width: 45%; 
 
\t -webkit-transition: opacity 3s ease-in-out; 
 
\t -moz-transition: opacity 3s ease-in-out; 
 
\t -o-transition: opacity 3s ease-in-out; 
 
\t transition: opacity 3s ease-in-out; 
 
} 
 
#crossfadingImages img.top:hover{ 
 
\t opacity: 0; 
 
} 
 
.bottom-image{ 
 
\t position: absolute; 
 
} 
 
.top-image{ 
 
\t 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"> 
 
\t <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> 
 
\t  
 
<div id="about" class="container"> 
 
\t <div class="row"> 
 
\t \t <div class="col-sm-6"> 
 
\t \t \t \t <p>about...</p> 
 
\t \t </div> 
 
\t   <div class="col-sm-6"> 
 
\t \t \t \t 
 
\t   </div> 
 
     </div> 
 
</div>