2
我正在嘗試創建一張照片網格，您可以將它們懸停在它們上面，並且它們將更改爲其他圖像。我已經嘗試將圖像放在CSS上作爲背景圖片，但是當您將鼠標懸停時，其他圖片看起來並沒有完全相同的大小（實際上是這樣）。如何創建一個照片網格，你可以將它們懸停，他們將更改爲其他照片？
我也嘗試過使用兩種圖像方法（一種在另一種上面），並且它在頁面上只有一個圖像，但使用圖像網格時效果很好，但由於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>
和代碼片段的東西應該當你將鼠標懸停在圖片的情況發生？現在他們只是靜態圖像。我知道你正在試圖讓它淡入另一個...... – Anthony
@Anthony他一直用於動畫的實際代碼已經在html中註釋掉了。 – RMo
我在下面發佈了一個答案。看看它是否適合你。 – ITWitch