1.code

import React, {useState} from 'react';
import styles from'./ImageMask.module.css'; 

function ImageMask() {
    const [isMaskVisible, setIsMaskVisible] = useState(true);
    //處理鼠標進入遮罩區域的事件
    const handleMouseEnter = () => {
        setIsMaskVisible(false);
      };
    //處理鼠標離開遮罩區域的事件
    const handleMouseLeave = () => {
        setIsMaskVisible(true);
      };
  return (
    <div className={styles['image-container']} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
      <img className={styles['image']} src="IMG_3264.PNG" alt="Image" width={150} height={150} /> 
      <div className={`${styles.mask} ${isMaskVisible ? styles.visible : styles.hidden}`}></div>
    </div>
  );
}

export default ImageMask;

.image-container {
    position: relative;
    width: 200px; 
    height: 200px;
  }
  
  img.image {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  .mask {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); 
    pointer-events: none; 
  }
  .visible {
    display: block;
  }
  .hidden {
    display: none;
  }

2.實作