Mở đầu
Hallo các bạn hôm nay mình 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.
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 Xuan Trung Pro -->
.imgFl img{border:1px solid #ddd;border-radius:4px;padding:5px;width:100%;height:100%}.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>
Chú ý: Đừ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
Okay, hi vọng là bài viết này sẽ hữu ích với bạn, chúc các bạn thành công và đừng quên chia sẻ bài viết này đến nơi rộng rãi nha.
Theo: Xuan Trung Pro
