Bài viết hướng dẫn các bạn tạo hiệu ứng 3D Layered Image, khi trỏ chuột vào image sẽ kích hoạt hiệu ứng. Code chỉ gồm HTML và CSS nên sẽ khá là đơn giản.
Hình ảnh sử dụng trong bài viết các bạn có thể tải tại đây:
Hướng dẫn thực hiện:
- Các bạn tạo lần lượt các file index.html, main.css, và trong file hình ảnh tải về các bạn sẽ lấy file có tên là 02.jpg đổi tên thành img2.jpg. Các file này đặt chung vào một thư mục.
- Bước tiếp theo là thêm thẻ head và body tương tự khi bắt đầu một trang HTML bình thường. Đối với VS Code, sau khi lưu file index.html, các bạn có thể dùng snippet html để ngay lập tức tạo thẻ head và body.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Layered Image Hover Effects</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <script src="main.js"></script> </head> <body> </body> </html>Bên main.css các bạn thêm vào:
body{ margin: 0; padding: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } - Thêm một div với class là .container:
<body> <div class="container"> </div> </body>Sang bên main.css, các bạn thêm style cho .container:
.container{ position: relative; width: 360px; height: 640px; margin-top: 150px; background: rgba(0, 0, 0, 0.1); transform: rotate(-30deg) skew(25deg) scale(0.8); transition: 0.5s; } - Thêm image vào trong container, đây là image chúng ta sẽ tạo hiệu ứng 3d layered, do đó chúng là sẽ thêm 4 thẻ image, và dùng cùng một ảnh.
<div class="container"> <img src="img2.jpg"> <img src="img2.jpg"> <img src="img2.jpg"> <img src="img2.jpg"> </div>Và trong phần css:
.container img{ position: absolute; width: 100%; transition: 0.5s; } - Để tạo hiệu ứng, chúng ta làm thêm vào CSS như sau:
.container:hover img:nth-child(4){ transform: translate(160px, -160px); opacity: 1; } .container:hover img:nth-child(3){ transform: translate(120px, -120px); opacity: 0.8; } .container:hover img:nth-child(2){ transform: translate(80px, -80px); opacity: 0.6; } .container:hover img:nth-child(1){ transform: translate(40px, -40px); opacity: 0.4; }
Với các bước trên, các bạn đã tạo xong hiệu ứng 3D Layered Image Hover. Dưới đây là hướng dẫn bằng video:
Các bạn có thể xem demo và download source tại đây.