CSS製作滑鼠移動到圖片上圖片會放大的效果
近期發現很多自架的部落格網站，當滑鼠移動到文章的特色圖片時會有圖片放大的效果
要怎麼做到呢？以下是範例參考：
<style type="text/css">
/*自動隱藏超出長寬的圖片*/
.post {
overflow: hidden;
width: 800px;
height: 600px;
}
/*轉場的時間*/
.post img {
transition: all 0.5s ease 0s;
}
/*判斷滑鼠的動作放大圖片還有增加透明度*/
.post img:hover {
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05);
opacity: .5;
}
</style>
<div class="post">
<img src="圖片網址" width="800" height="600" alt=""/>
</div>
你好，謝謝你的分享，剛剛試了上面的語法，不過圖片一直跑在左邊，請問有辦法可以讓多張圖片並列但還是整體置中嗎，請問我的center要加在哪裡呢
您好
請研究一下float屬性
置中的話外層可包一個DIV，設為置中
圖片要對齊，寬度可使用百分比^^
謝謝您的分享！
想請教一下，希望滑動到圖片上時，除了圖片以外的地方全部變暗，要怎麼處理？
再次謝謝！！！
您好，請朝css圖層、hover、透明度，方向研究^^
您好，非常謝謝多力哥的回覆!!!!
終於可以停止無限制地讓圖片亂跑了。
您好，非常感謝您的分享!!!!!!!
請問如果我想要把圖片並排並且有這個效果的話，要這麼編寫呢?
試了好久都不行><
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/*自動隱藏超出長寬的圖片*/
.post {
overflow: hidden;
width: 100%;
height: 600px;
}
/*轉場的時間*/
.post img {
transition: all 0.5s ease 0s;
float:left;
margin:10px;
}
/*判斷滑鼠的動作放大圖片還有增加透明度*/
.post img:hover {
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05);
opacity: .5;
}
</style>
<div class="post">
<img src="圖片網址" width="400" height="300" alt=""/>
<img src="圖片網址" width="400" height="300" alt=""/>
</div>