Hướng dẫn tạo Image Hover Overlay với CSS - Demo 1
RUN
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .main { width: 500px; text-align: center; margin: auto; } .container { position: relative; width: 100%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #888888; } .container:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } </style> </head> <body> <div class="main"> <h2>Freetuts.net hướng dẫn tạo Image Hover Overlay</h2> <p>Hover lên ảnh để xem hiệu ứng</p> <div class="container"> <img src="https://freetuts.net/upload/tut_post/images/2017/08/06/987/demo.jpg" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Freetuts.net</div> </div> </div> </div> </body> </html>
PHÓNG TO