CSS懸停圖片

Question

我正在爲一些喜歡汽車的老人工作。他們之前的照片庫已不在服務中，他們問我是否可以製作一個新照片庫。我希望儘可能簡單。所以我製作了一張小圖片。一旦你將鼠標懸停在圖像上，它就會變得更大，這些人告訴我他們喜歡我的想法。如果您點擊圖片，它會直接轉到圖片網址。

問題是從原始大小過渡到較大的一個使懸停的這個毛病看起來。我希望過渡更順暢，有什麼建議嗎？

這裏的鏈接到該網站 - http://tcrgv8club.org/photogallery.php

這裏是我的CSS代碼：

.model img{ 
width: 125px; 
height: 100px; 
border: 2px solid black; 
z-index: 0; 
} 

img:hover { 
width: 500px; 
height: 450px; 
z-index:1; 
position: absolute; 
} 

.model td{ 
    padding: 10px; 
} 

Answer 1

我會建議使用transform: scale作爲改變寬度/高度將打破你的佈局流。

.model img { 
 
    width: 125px; 
 
    height: 100px; 
 
    border: 2px solid black; 
 
    position: relative; 
 
    transition: z-index 0s, transform 0.5s; 
 
} 
 
img:hover { 
 
    z-index: 1; 
 
    transform: scale(2.5); 
 
}

<div class="model"> 
 
    <img src="http://placehold.it/100x100" alt=""> 
 
    <img src="http://placehold.it/100x100" alt=""> 
 
    <img src="http://placehold.it/100x100" alt=""> 
 
</div>

Answer 2

img.thumbnail { 
    max-width:20%; 
    max-height:50%; 
    -webkit-transition: width 2s, height 2s, -webkit-transform 0.5s; 
    /* For Safari 3.1 to 6.0 */ 
    transition: width 2s, height 2s, transform 0.5s; 
} 
img.thumbnail:hover { 
    -webkit-transform:scale(2); 
    /* Safari and Chrome */ 
    -moz-transform:scale(2); 
    /* Firefox */ 
    -ms-transform:scale(2); 
    /* IE 9 */ 
    -o-transform:scale(2); 
    /* Opera */ 
    transform:scale(2); 
} 

Fiddle

Answer 3

改變位置相對解決了這個問題對我來說，我相信其他的答案會，以及工作。我會看到這些人的想法。謝謝你們！

.model img{ 
    width: 125px; 
    height: 100px; 
    border: 2px solid black; 
    z-index: 0; 
-webkit-transition: width 2s, height 2s; 
transition: width 2s, height 2s; 
} 

img:hover { 
width: 550px; 
height: 450px; 
z-index:1; 
position: relative; 
} 

.model td{ 
    padding: 10px; 
} 

否則這個答案不會改變表的佈局，我認爲這是最好的。

.model img { 
    width: 125px; 
    height: 100px; 
    border: 2px solid black; 
    position: relative; 
    transition: z-index 0s, transform 0.5s; 
} 
img:hover { 
    z-index: 1; 
    transform: scale(2.5); 
}