CSS Image Rollover

2

簡單的一個小技巧。有時呈現照片或廠商 logo 時會希望有些變化，當滑鼠 hover link 時讓灰階換成原本的彩色圖檔，但因為某些緣故必須以 <img> 方式呈現，這時就可以靠這方式簡單做到想要的效果。

基本原理就是利用 overflow: hidden 以及 position 讓圖檔隱藏，當滑鼠移過時再秀出隱藏的部分。將圖檔上下合併成一張。

cocktail

1
2
3
4

<div class="photo">
    <a href="#">
        <img src="photo.jpg" alt="" width="128" height="256" />
    </a></div>
1
2
3
4
5
6
7
8
9
10
11

.photo {
    width: 128px;
    height: 128px;
    overflow: hidden;
    position: relative;
}
.photo a:hover img {
    position: absolute;
    left: 0px;
    top: -128px;
}

觀看範例

Sunday, July 5th, 2009

Category: CSS, Tutorials

Bookmark and Share

2 條評論

2009/07/07

IanTing

很方便又簡單的技巧，只可惜IE6不支援

2009/07/07

underfire

to IanTing
ya, 是時候 drop ie6 support 了 -O.O-