Cách nào để bất cứ hình ảnh có gắn liên kết (link) trong bất cứ bài viết nào trong wordpress đều có hiệu ứng chuột khi di chuột qua ảnh đó!

Gemini

Để bất cứ hình ảnh nào có gắn liên kết (link) trong bài viết WordPress đều có hiệu ứng khi di chuột qua, bạn cần thêm một đoạn mã CSS tùy chỉnh. Hiệu ứng thường được dùng là làm ảnh sáng hơn (opacity), phóng to một chút (scale), hoặc đổ bóng (box-shadow).
Dưới đây là các bước chi tiết và đoạn mã CSS mẫu mà bạn có thể sử dụng:

🛠️ Các Bước Thực Hiện

1. Truy Cập Khu Vực Thêm CSS Tùy Chỉnh

Bạn có thể thêm mã CSS vào WordPress theo các cách sau (nên dùng cách 1):

Cách 1 (Khuyến nghị):
1. Vào Giao diện (Appearance) $\rightarrow$ Tùy biến (Customize).
2. Tìm và click vào CSS bổ sung (Additional CSS) hoặc CSS Tùy chỉnh (Custom CSS).
3. Dán đoạn mã CSS vào đây.
Cách 2: Chỉnh sửa file style.css của theme con (child theme) nếu bạn đang sử dụng.

2. Sử Dụng Đoạn Mã CSS Mẫu

Để đảm bảo hiệu ứng chỉ áp dụng cho hình ảnh có liên kết (link) trong nội dung bài viết, chúng ta sẽ dùng bộ chọn CSS kết hợp:

Bộ chọn a img nhắm đến tất cả thẻ img (hình ảnh) nằm bên trong thẻ a (liên kết).
Thẻ bao bọc nội dung bài viết thường là div.entry-content hoặc div.post-content (tùy theo theme, nhưng thường dùng bộ chọn tổng quát hơn là đủ).

Sử dụng bộ chọn a img là cách đơn giản và hiệu quả nhất.

Dưới đây là 3 hiệu ứng chuột thông dụng bạn có thể lựa chọn:

Hiệu ứng 1: Làm Mờ/Sáng (Opacity)

Đây là hiệu ứng đơn giản và phổ biến nhất. Hình ảnh sẽ hơi mờ đi (hoặc sáng hơn) khi chuột di qua.

/* Áp dụng hiệu ứng chuyển đổi mềm mại trong 0.3 giây */
a img {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Hiệu ứng khi di chuột qua: giảm độ mờ (tăng độ sáng) */
a img:hover {
    opacity: 0.8; /* Giá trị từ 0.0 (trong suốt) đến 1.0 (rõ nét) */
}

Hiệu ứng 2: Phóng To Nhẹ (Scale)

/* Đảm bảo hiệu ứng chỉ xảy ra bên trong khung nội dung (ngăn chặn hiệu ứng tràn) */
.entry-content a { 
    display: inline-block; 
    overflow: hidden; 
}

/* Áp dụng hiệu ứng chuyển đổi mềm mại */
a img {
    transition: transform 0.3s ease-in-out;
    display: block; /* Quan trọng để transform hoạt động chính xác */
}

/* Hiệu ứng khi di chuột qua: phóng to 1.05 lần (tăng 5%) */
a img:hover {
    transform: scale(1.05); 
}

Hiệu ứng 3: Đổ Bóng (Box-Shadow)

Hiệu ứng này giúp hình ảnh nổi bật hơn bằng cách thêm bóng khi di chuột qua.

/* Áp dụng hiệu ứng chuyển đổi mềm mại */
a img {
    transition: box-shadow 0.3s ease-in-out;
}

/* Hiệu ứng khi di chuột qua: thêm bóng */
a img:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Bóng to và đậm hơn */
}