CSS比例尺影像重疊

Question

我正在嘗試對圖像進行縮放。 問題是按比例放大的圖像與其鄰居重疊，那么當前懸停的圖像始終位於頂部該怎么辦？

 .col-sm-4 { padding: 0 !important; } img { max-width: 100%; height: auto; } .box { -webkit-transition:ease 0.7s; -moz-transition:ease 0.7s; -o-transition:ease 0.7s; transition:ease 0.7s; display: block; } .box:hover { position: relative; -webkit-transform: scale(1.1); transform: scale(1.1); z-index: 1; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-sm-4"> <a class="box green"> <img src="http://via.placeholder.com/525x525/478f00/ffffff"> </a> </div> <div class="col-sm-4"> <a class="box red"> <img src="http://via.placeholder.com/525x525/aa001e/ffffff"> </a> </div> <div class="col-sm-4"> <a class="box blue"> <img src="http://via.placeholder.com/525x525/00a0b0/ffffff"> </a> </div> </div> </div> 

Answer 1

您應該在每兩張圖像之間留一點邊距。 並為第二和第三類命名與第一類不同的名稱。

然后更改css代碼中的每個類名稱，並為第二和第三次申請對第一堂課所做的工作。