給圖片動態新增半透明遮罩效果
阿新 • • 發佈：2019-02-04
當滑鼠hover到圖片上時，出現半透明遮罩效果，移除hover則取消半透明遮罩效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .demo{ width:425px; height:283px; position: relative; overflow:hidden; } demo img{ width:100%; } .demo i{ position:absolute; top:0; width:100%; height:100%; background-color: rgba(251,251,251,0); transition: background-color 0.5s; } .demo:hover i{ background-color: rgba(251,251,251,0.3); } </style> </head> <body> <div class="demo"> <img src="2.jpg"> <i></i> </div> </body> </html>
檢視示例