Hover div 的時候放大圖片 | css

1

background-position: x軸位置 y軸位置;

1
2
3
4
5
6

/* 靠左靠下對齊 */
background-position:left bottom;　
/* 離左邊 30px，離上方 60px 的位置 */
background-position:30px 60px;　
/* 離左邊 10%，離上方 50% 的位置  */
background-position:10% 50%;　

1
2
3
4
5
6

<div class="wrapper">
  <div class="frame"></div>
  <div class="frame"></div>
  <div class="frame"></div>
  <div class="frame"></div>
</div>

 1
 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

.wrapper {
  /* 使用 flex 讓 flex item 呈現由左到右的排列 */
  display: flex;
  /* 增加一點空間在 flex item 的周圍 */
  justify-content: space-around;
}

.frame {
  /* 將每一個 div 寬度設定為 100px */
  width: 100px;
  /* 將每一個 div 高度設定為 150px */
  height: 150px;
  /* 設定背景圖片 */
  background-image: url("https://picsum.photos/200/150");
  /* 將背景圖片位置置中 */
  background-position: center;
  /* 設定邊框顏色及寬度 */
  border: 1px solid #ecf1f4;
  /* 設定邊框的圓角 */
  border-radius: 24px;
  /* 在:hover時增加動畫效果 */
  transition: 0.5s;
}

.frame:hover {
  /* 在:hover時寬度變成 200px */
  width: 200px;
}