這篇文章要介紹，如何使用使用 mask-image 和 clip-path 創建圖片從一種形狀逐漸轉換為另一種形狀的效果

HTML

創建一個 image-container 的容器，包含兩張圖片

<div class="image-container">
    <div class="image image1">
        <img src="picture1.jpeg" alt="Image 1">
    </div>
    <div class="image image2">
        <img src="picture2.png" alt="Image 2">
    </div>
</div>

CSS

1. 設定頁面樣式

使用 Flexbox 將頁面內容居中顯示，確保圖片位於畫面正中間

body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   margin: 0;
   background: white;
}

2. 圖片容器和圖片的基礎樣式

.image-container {
   display: flex;
   width: 600px; 
   height: 300px;
   overflow: hidden; 
}

.image {
   position: relative; 
   width: 50%; 
   height: 100%;
   transition: mask-image 3s ease-in-out, opacity 3s ease-in-out; 
}

• image-container : 設定圖片容器的大小
• overflow : 確保圖片超出容器的部分不會顯示
• image : 設定每張圖片的寬度、高度和過渡效果
• transition : 設置 mask-image 和 opacity 的變化時間為 3 秒，並使用 ease-in-out 實現平滑的過渡效果

3. 初始形狀和透明度

.image1 {
   mask-image: radial-gradient(circle at center, black 50%, transparent 51%); 
   z-index: 1;
}

.image2 {
   mask-image: none; 
   z-index: 0;
   opacity: 0; 
}

• mask-image : 定義圖片的遮罩形狀
  • radial-gradient : 設定 .image1 為圓形
  • black 50% : 表示顯示部分
  • transparent 51% : 表示透明部分
• image2 : 初始設定為 none，表示不會應用任何遮罩形狀
  • 透明度 (opacity) : 設為 0，在一開始不顯示

4. 當懸停時觸發的過渡效果

將滑鼠懸停在 .image-container 上時，圖片會從一張轉換為另一張，並且形狀從方形變為圓形

.image-container:hover .image1 {
   mask-image: none; 
   opacity: 0; 
}

.image-container:hover .image2 {
   mask-image: radial-gradient(circle at center, black 50%, transparent 51%); 
   opacity: 1; 
}

• 第一張圖片 : 原本顯示為圓形
  • 懸停時 : mask-image 變為 none，表示圖片回復為完整顯示的方形
  • opacity : 設為 0，讓圖片逐漸消失
• 第二張圖片 : 原本是隱藏的
  • 懸停時，mask-image 會變為圓形
  • opacity : 設為 1，讓圖片逐漸顯示並以圓形的方式呈現
• transition : 設定過渡效果，讓兩張圖片在 3 秒內慢慢互換

5. 圖片適應容器

.image img {
   width: 100%; 
   height: 100%; 
   object-fit: cover; 
}

• object-fit : 確保圖片在容器內被裁剪並保持比例，同時不會變形，可以讓圖片更好適應容器的大小

結果呈現

• 圖片來源1
• 圖片來源2