Css 實作圖片 hover 特效筆記 css

published about 8 years ago

最近因為公司需要製作那種 hover 會顯示一些文字的特效，看著一同實習的同事寫 code 也讓我學到不少東西。

我們要做的東西成品大概長這樣：

See More

Position Absolute vs. Relative

其實做法很簡單，重點是要搞清楚 position: absolute 跟 position: relative 之間的關係。

兩者的特性皆是可以使用 top 跟 left 屬性去調整位置，唯一的差別在於起始點的不同， relative 是從原本在的位置開始算起，而 absolute 直觀會認為是從視窗的左上角開始算起，但其實是從上一個被設定為 position: absolute 的 parent node 開始算起，如果沒有的話才是從視窗左上角開始。

所以要讓蓋在圖片上面的區塊對齊圖片的左上角，只要將上層的 div 設定為 position: relative 並將要蓋在上面的區塊設定 position: absolute 為即可：

Html

<div class="holder">
  <img src="https://upload.wikimedia.org/wikipedia/commons/1/15/Hopwas_Woods_Sun.jpg" width="600" height="400">
  <div class="on-top">See More</div>
</div>

Css

.holder {
  position: relative;
}
	
.on-top {
  position: absolute;
  opacity: 0;
  transition: all 200ms ease-in-out;
  top: 0px;
  left: 0px;
}

.on-top:hover {
  opacity: 1;
}

Reference