CSS懸停圖片

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

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

這裏的鏈接到該網站 - 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; 
}

來源

2016-08-15 th30d0rab1e

你看過CSS'transition'屬性嗎？ – Scott

我添加了一個轉換的webkit，但我仍然得到一些愚蠢的東西從一張圖片到另一張圖片。很酷的東西，但！ – th30d0rab1e

它看起來已經有過渡了。他正在談論它看起來像是一個小問題，那是因爲當你懸停圖像變得更大，並因爲它的絕對定位而下移。所以你不會在它上面盤旋。將圖像懸停設置爲相對位置並查看它的行爲。 – Vcasso

我會建議使用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>

來源

2016-08-15 18:59:43 Aziz

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

來源

2016-08-15 18:56:20 Goku

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

.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); 
}

來源

2016-08-15 20:19:17 th30d0rab1e

CSS懸停圖片

回答

相關問題