2017-08-12 110 views
0

我一直在努力創建一個頁面,在該頁面上我可以顯示多個圖像,在懸停時,它將放大約80%的頁面寬度。 要做到這一點,基於這裏的其他問題的答案,我已經使用了變換:scale()。 我面臨的問題是,這似乎導致放大後圖像重疊。 我希望實現的是讓圖像在擴大時相互向下推,而不是越過或越過。放大懸停圖像重疊問題(CSS變換:縮放)

請原諒我解決這個問題。一般來說,編碼對我而言是非常新穎的。

https://jsfiddle.net/msandford/zjrc7v6s/

.image1 { `display:block; 
position: relative; 
width: 10%; 
left:40%; 
height: auto; 
transition: 0.4s ease-in-out; 
-webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
z-index:1; 
} 
.image1:hover { 
display:block; 
position: relative; 
transform: scale(4); 
transition: 0.4s ease-in-out; 
-webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
z-index:1; 
} 
.image2 { 
display:block; 
position: relative; 
width: 10%; 
left:40%; 
height: auto; 
transition: 0.4s ease-in-out; 
-webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
z-index:1; 
} 
.image2:hover { 
display:block; 
position: relative; 
transform: scale(4); 
transition: 0.4s ease-in-out; 
-webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
z-index:1; 
} 
.image3 { 
display:block; 
position: relative; 
width: 10%; 
left:40%; 
height: auto; 
transition: 0.4s ease-in-out; 
-webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
z-index:1; 
} 
.image3:hover { 
display:block; 
position: relative; 
transform: scale(4); 
transition: 0.4s ease-in-out; 
-webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    -ms-transition: all .4s ease-in-out; 
z-index:1; 
} 

在此先感謝。

回答

0

scale()函數保留原始元素的邊界框,從而不推動其他圖像,我本來可以添加邊距(頂部和底部),但隨後圖像跳轉,因此我選擇使用width財產(爲什麼不呢?什麼是你最初的問題,導致scale()?)

#scale { 
 
    text-align: center; /* to align all inline content inside the div */ 
 
} 
 

 
#scale img { 
 
    width: 150px; 
 
    transition: 0.4s ease-in-out; 
 
    -webkit-transition: all .4s ease-in-out; 
 
    -moz-transition: all .4s ease-in-out; 
 
    -o-transition: all .4s ease-in-out; 
 
    -ms-transition: all .4s ease-in-out; 
 
} 
 

 
#scale img:hover { 
 
    width: 80%; 
 
}
<div id="scale"> 
 
    <img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"><br> 
 
    <img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"><br> 
 
    <img src="http://lorempixel.com/output/food-q-c-640-480-10.jpg"> 
 
</div>

而且我覺得我應該指出的是,你正在使用類錯誤。

A class是一個字符串,你可以應用於所有的圖像,然後你可以在css中做.scalethis{}一次將它應用到所有的圖像。

如何使用它就像你應該如何使用id