Share code hiệu ứng hình ảnh nổi 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 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é!
2 comments
image quote pre code