Cách tạo hiệu ứng hình ảnh nổi lên khi di chuột cho Blogger
Mở đầu
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 Xuan Trung Pro -->
.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
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.
5 comments
Anand Nawal
image quote pre code