## 圖片遮罩效果 >效果如圖  >html代碼 ``` <div class="box"> <div class="bg"></div> <div class="cover""><h1>第一天</h1></div> </div> ``` >css代碼 ``` .box { width: 300px; height: 300px; margin: 100px auto; position: relative; overflow: hidden; } .box>div { position: absolute; height: 300px; width: 300px; } .bg { background: aqua; top: 0; left: 0; } .cover { top: 0; left: 0; background: rgba(0, 0, 0, 0.2); transition: 1s; transform-origin: left bottom; //選擇旋轉點, 此時為左下角 display: flex; justify-content: center; align-items: center; } .box:hover .cover { transform: rotate(-90deg); } .cover h1 { color: #fff; } ```