2
私はあなたがそれらの上に置くことができる写真のグリッドを作成しようとしている、彼らは他の画像に変更されます。私は背景画像としてCSSに画像を配置しようとしましたが、ホバーすると、他の画像は正確に同じサイズではないように見えます（実際にはそうです）。写真のグリッドをどのようにしてホバーすることができますか？他の写真に変わりますか？
私はまた、2つの画像の方法（もう一方の上に）を使用してみましたが、ページ上の1つの画像でうまく動作しますが、画像のグリッドでは、position: absoluteのためにうまくいきません。
私が「並べ替え」の作品が他の画像を置き換えることによって見つかった唯一の方法ですが、スムーズな移行（別の画像にフェード）はありません。
Here is the access to code pen (seems to work better)：
コード：
CSS：
.pages-content {
max-width: 400px
}
.left {
padding-left: 5px;
}
.right {
padding-right: 5px;
}
.bottom {
padding-bottom: 10px;
}
img.a {
\t position: absolute;
\t left: 0;
\t top: 0;
z-index: 10;
transition: opacity 1s ease-in-out;
}
img.a:hover {
opacity: 0;
}
img.b {
\t position: absolute;
\t left: 0;
\t top: 0;
}
HTML:<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<section class="container pages-content">
<div class="row">
\t <div class="col-md-12 bottom">
<img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid"/>
<!-- trying to use hover to change images
\t <img src="https://d1mwzmktacfw26.cloudfront.net/wp-content/uploads/2016/04/23105511/Frontier-400x200.jpg" alt="" class="img-fluid a"/>
<img src="http://www.tikbok.com/rahalat/wp-content/uploads/2011/08/1-400x200.jpg" alt="" class="img-fluid b"/> -->
\t </div>
\t </div>
\t <div class="row">
\t <div class="col-md-6 col-sm-12 right">
\t \t <img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
\t </div>
\t <div class="col-md-6 col-sm-12 bottom left">
\t \t <img src="http://cheb-room.ru/uploads/cheb/2016/11/w9RC4W-QqXw-200x200.jpg" alt="" class="img-fluid" />
\t </div>
</div>
\t <!-- Second block -->
\t <div class="row">
\t <div class="col-md-6 col-sm-12 right ">
\t \t <div class="row">
\t \t <div class="col-md-6 push-md-6 col-sm-12 bottom left">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
\t \t </div>
\t \t <div class="col-md-6 pull-md-6 col-sm-12 bottom right">
<img src="http://www.animated-gifs.eu/category_cartoons/avatars-100x100-cartoons-spongebob/0038.gif" alt="" class="img-fluid"/>
\t \t </div>
\t \t <div class="col-md-12 bottom">
<img src="http://donsmaps.com/clickphotos/dolnivi200x100.jpg" alt="" class="img-fluid" />
\t \t </div>
\t \t <div class="col-md-12 bottom">
<img src="http://markcarson.com/images/SunBird-7-200x200.png" alt="" class="img-fluid" />
\t \t </div>
\t \t </div>
\t </div><!--./col-md-6-->
\t <div class="col-md-6 bottom col-sm-12 left project-image">
\t \t <img src="http://www.bravacasa.rs/wp-content/uploads/2014/03/Odlaganje-stvari-za-decu-slika-7-505x1025.jpg" width="200" class="img-fluid"/>
\t </div>
\t </div><!--./block 2-->
</section>
</body>
何かがあなたが画像上にカーソルを移動するときに発生することになっていますか？今は静的な画像に過ぎません。私はあなたがそれを持っていることを知っているので、1つは他のものにフェードアウトします... – Anthony
@Anthony彼がアニメーションのために使用している実際のコードはhtmlでコメントアウトされています。 – RMo
私は以下の回答を掲載しました。それがあなたのために働くかどうか見てください。 – ITWitch