英文 | https://www.geeksforgeeks.org/how-to-create-an-image-overlay-icon-using-html-and-css/?ref=leftbar-rightbar
翻譯 | web前端開發（web_qdkf）
使用圖像覆蓋圖標可以爲你的網站交互細節或一組功能加深印象。本文內容將分爲兩部分，第一部分創建結構並附加圖標的鏈接。在第二部分中，我們將使用CSS進行設計。
創建結構：在本節中，我們將創建一個基本結構，併爲這些圖標附加Font-Awesome的CDN鏈接，這些圖標將用作懸停時的圖標。
“字體真棒”中的圖標的CDN鏈接：
<link rel =” stylesheet” href =““ https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
HTML代碼：
<!DOCTYPE html> <html>
<head> <title> Image Overlay Icon using HTML and CSS </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container"> <h1>GeeksforGeeks</h1> <b>Image Overlay Icon using HTML and CSS</b> <div class="img"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png" alt="Geeksforgeeks"> <div class="overlay"> <a href="#" class="icon"> <i class="fa fa-user"></i> </a> </div> </div> </div> </body>
</html>
設計結構：在上面內容中，我們創建了將用作圖像疊加圖標的基本網站的結構。在這部分內容中，我們將設計圖像疊加圖標的結構。
CSS代碼：
<style> body { text-align: center; }
h1 { color: green; }
/* Image styling */ img { padding: 5px; height: 225px; width: 225px; border: 2px solid gray; box-shadow: 2px 4px #888888;
}
/* Overlay styling */ .overlay { position: absolute; top: 23.5%; left: 32.8%; transition: .3s ease; background-color: gray; width: 225px; height: 225px; opacity: 0;
}
/* Overlay hover */ .container:hover .overlay { opacity: 1; }
/* Icon styling */ .icon { color: white; font-size: 92px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } </style>
最終解決方案：這是結合以上兩部分內容後的最終代碼。它將顯示圖像疊加圖標。
<!DOCTYPE html> <html>
<head> <title> Image Overlay Icon using HTML and CSS </title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { text-align: center; }
h1 { color: green; }
/* Image styling */ img { padding: 5px; height: 225px; width: 225px; border: 2px solid gray; box-shadow: 2px 4px #888888; }
/* Overlay styling */ .overlay { position: absolute; top: 23.5%; left: 32.8%; transition: .3s ease; background-color: gray; width: 225px; height: 225px; opacity: 0; }
/* Overlay hover */ .container:hover .overlay { opacity: 1; }
/* Icon styling */ .icon { color: white; font-size: 92px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } </style> </head>
<body> <div class="container"> <h1>GeeksforGeeks</h1> <b>Image Overlay Icon using HTML and CSS</b> <div class="img"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png" alt="Geeksforgeeks"> <div class="overlay"> <a href="#" class="icon"> <i class="fa fa-user"></i> </a> </div> </div> </div> </body>
</html>
最終輸出效果：
