Mở đầu

Hallo các bạn hôm nay Winta sẽ share code tạo hiệu ứng hình ảnh nổi lên khi di chuột cho Blogger. Đây là một hiệu ứng chuyển động đẹp, sinh động giúp người dùng cảm thấy thú vị khi xem website.

Đặc biệt là nó chỉ dùng CSS nên khá là nhẹ
Bạn có thể xem demo dưới đây để tham khảo nha

Hướng dẫn

Bước 1: Đăng nhập vào Blogger

Bước 2: Ấn vào chủ đề ➤ vào chỉnh sửa HTML

Bước 3: Sao chép toàn bộ CSS bên dưới đặt vào trên thẻ ]]></b:skin>

<!-- Floating image code By Winta -->
  .imgFl img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 100%;
    height: 100%;
  }
  /* Hover effect */
  .imgFl img:hover {
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5);
  }
  img.imgFl{transition:all .4s ease-in-out;box-shadow:0 0.125rem 0.25rem rgb(0 0 0 / 8%);border-radius:5px}
  img.imgFl:hover{-webkit-box-shadow:0 0.625rem 0.875rem -0.3125rem #e0e0e0;box-shadow:0 0.625rem 0.875rem -0.3125rem #e0e0e0}
  .darkMode img.imgFl:hover{-webkit-box-shadow:0 0.625rem 0.875rem -0.3125rem #000;box-shadow:0 0.625rem 0.875rem -0.3125rem #000}

Bước 4: Để sử dụng gọi đến class imgFl là được

<div class="imgFl">
  <img alt="Image with Floating hover effect" class="imgFl" src="#"/>
</div>

Đừng quên thay thế # bằng url hình ảnh của bạn và nhấp vào lưu.

Lời kết

Chúc các bạn thành công và đừng quên để lại bình luận, đánh giá bên dưới nhé!