<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Puzzle Overlay on Image</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.puzzle-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
border: 5px solid #333;
border-radius: 10px;
}
.puzzle-piece {
position: relative;
background-image: url('https://w.ladicdn.com/60988adb4f31f60012f43f81/khaygodecor-lmfbenbp1tr374-20240724141227-agklk.jpg');
background-size: 300px 300px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
cursor: pointer;
transition: transform 0.3s ease;
}
.puzzle-piece:hover {
transform: scale(1.1);
}
/* Position each puzzle piece */
.piece1 { background-position: 0 0; }
.piece2 { background-position: -100px 0; }
.piece3 { background-position: -200px 0; }
.piece4 { background-position: 0 -100px; }
.piece5 { background-position: -100px -100px; }
.piece6 { background-position: -200px -100px; }
.piece7 { background-position: 0 -200px; }
.piece8 { background-position: -100px -200px; }
.piece9 { background-position: -200px -200px; }
/* Optional: Adjust text for each piece */
.puzzle-piece span {
background-color: rgba(0, 0, 0, 0.5);
padding: 5px 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="puzzle-container">
<div class="puzzle-piece piece1"><span>Khay</span></div>
<div class="puzzle-piece piece2"><span>Gỗ</span></div>
<div class="puzzle-piece piece3"><span>Decor</span></div>
<div class="puzzle-piece piece4"><span>Đẹp</span></div>
<div class="puzzle-piece piece5"><span>Tinh</span></div>
<div class="puzzle-piece piece6"><span>Tế</span></div>
<div class="puzzle-piece piece7"><span>Link</span></div>
<div class="puzzle-piece piece8"><span>Mua</span></div>
<div cl
ass="puzzle-piece piece9"><span>Ở Đây</span></div>
</div>
</body>
</html>
Giải thích:
.puzzle-container:
Đây là khung chứa chính sử dụng CSS Grid để chia bức ảnh thành 9 ô vuông, mỗi ô sẽ chứa một mảnh ghép của hình ảnh.
.puzzle-piece:
puzzle-piece :
Mỗi mảnh ghép là một ô trong grid, được định vị dựa trên vị trí của hình ảnh gốc (background-position). Hình ảnh được chia thành 9 phần bằng nhau (3x3) với kích thước 100x100px cho mỗi phần (kích thước tổng thể của bức ảnh là 300x300px).
Lớp phủ nội dung:
Mỗi mảnh ghép có một lớp phủ nội dung (<span>) hiển thị số thứ tự hoặc nội dung khác. Lớp phủ này có nền màu đen mờ để đảm bảo nội dung dễ đọc trên nền hình ảnh.
Hiệu ứng hover:
Khi di chuột qua từng mảnh ghép, chúng sẽ phóng to nhẹ để tạo cảm giác tương tác giống như một trò chơi xếp hình.
Responsive:
Layout này sẽ tự động điều chỉnh kích thước và vị trí của các mảnh ghép để phù hợp với kích thước khung hình của container.
Hướng dẫn template Khay Gỗ Decor puzzle 9 Ô :
Thay thế your-image.jpg bằng đường dẫn đến hình ảnh mà bạn muốn sử dụng. Đảm bảo rằng hình ảnh có kích thước phù hợp (300x300px) để các mảnh ghép được hiển thị đúng cách.
Điều chỉnh nội dung bên trong các thẻ <span> để hiển thị thông tin hoặc văn bản bạn muốn trên mỗi mảnh ghép.
Khi chạy mã này, bạn tạo cảm giác nội dung trên bức ảnh được chia thành 9 phần, mỗi phần hiển thị tại một vị trí của hình ảnh gốc với nội dung phủ bên trên. Layout này mô phỏng lại cảm giác của một trò chơi xếp hình và có thể được tùy chỉnh thêm theo nhu cầu của bạn.
