CSS Hiệu Ứng Hover Ảnh Đại Diện (Thumb Hover)

1. 📃 Giới Thiệu và Mục Đích

Đoạn mã này là phần **CSS bổ sung** được thiết kế để tạo hiệu ứng thị giác hấp dẫn cho ảnh đại diện (thumbnail) khi người dùng di chuột (hover) qua ảnh. Đoạn mã này hoạt động dựa trên các lớp CSS .show-post-thumb-container và .show-post-thumb đã được định nghĩa trong Shortcode

Hiệu ứng bao gồm:

• **Phóng to (Zoom):** Ảnh được phóng to nhẹ nhàng (transform: scale(1.05)) khi di chuột.
• **Lớp phủ (Overlay):** Thêm một lớp phủ mờ màu đen (background: rgba(0, 0, 0, 0.4)) lên trên ảnh, giúp làm nổi bật ảnh và báo hiệu rằng ảnh có thể được nhấp (click).
• **Chuyển đổi mượt mà (Transition):** Sử dụng transition: transform 0.3s ease-in-out để đảm bảo hiệu ứng diễn ra mượt mà và chuyên nghiệp.

2. ⚒️ Hướng Dẫn Cài Đặt

Đoạn mã này sử dụng hook wp_head để chèn CSS trực tiếp vào phần <head> của trang web. Bạn cần dán toàn bộ đoạn mã PHP dưới đây vào file functions.php của Theme hoặc Child Theme đang hoạt động.

1. Truy cập file functions.php.
2. Sao chép toàn bộ đoạn mã PHP ở mục 3 (Mã Nguồn).
3. Dán đoạn mã vào cuối file functions.php.
4. Lưu file.

**Lưu ý:** Đoạn mã này hoạt động với Shortcode

3. 💻 Đoạn Mã Nguồn (Dán vào functions.php)

<?php
// CSS hiệu ứng hover ảnh
function kn_show_post_image_hover_css() {
    echo '
    <style>
        .show-post-thumb-container {
            position: relative;
            overflow: hidden; /* Cần thiết để ẩn phần ảnh bị scale ra ngoài */
            display: block;
        }
        .show-post-thumb {
            display: block;
            width: 100%;
            height: auto;
            transition: transform 0.3s ease-in-out; /* Tạo hiệu ứng chuyển đổi mượt mà cho Zoom */
        }
        .show-post-thumb-container::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0); /* Mặc định trong suốt */
            transition: background 0.3s ease-in-out; /* Tạo hiệu ứng chuyển đổi mượt mà cho Overlay */
        }
        .show-post-thumb-container:hover .show-post-thumb {
            transform: scale(1.05); /* Phóng to ảnh 5% khi di chuột */
        }
        .show-post-thumb-container:hover::after {
            background: rgba(0, 0, 0, 0.4); /* Thay đổi lớp phủ sang màu đen mờ khi di chuột */
        }
    </style>';
}
add_action('wp_head', 'kn_show_post_image_hover_css');
?>

4. 🔧 Phân Tích Kỹ Thuật

• .show-post-thumb-container: Được đặt position: relative và overflow: hidden. Điều này đảm bảo hiệu ứng phóng to (scale) của ảnh con bên trong không làm tràn ra khỏi hộp chứa.
• .show-post-thumb-container::after: Sử dụng pseudo-element này để tạo **Lớp phủ (Overlay)**. Nó được đặt position: absolute để phủ kín ảnh, và hiệu ứng chuyển đổi màu nền (từ trong suốt sang đen mờ) được áp dụng khi hover.
• :hover Selectors: Các selector :hover được nhắm vào container, sau đó áp dụng hiệu ứng cho ảnh (.show-post-thumb) và lớp phủ (::after) bên trong nó.