Hiệu Ứng Thả Tim Vào Hình Ảnh Blogspot

Tiếp tục chia sẻ về những thủ thuật Blogspot, hôm nay DESBLOG sẽ mang đến cho các bạn hiệu ứng thả tim vào hình ảnh trong Blogspot.


DEMO NGÀY BÊN TRÁI BẠN ĐẤY HIHI

Dưới đây là đoạn CSS CSS: Thêm đoạn này dưới thẻ ]]></b:skin>
.container1{
  position: relative;
  overflow: hidden;
}
.container1 img{
  width: 100%;
}
.container1 .heart{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0);
  color: #f1f1f1;
  font-size: 100px;
  transition: 0.3s;
}
.container1 input{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  opacity: 0;
  cursor: pointer;
}
.container1:hover > .heart{
  transform: translate(-50%,-50%) scale(1);
}
.container1 input:checked + .heart{
  color: #e74c3c;
}
Còn đây là CODE: Đặt chúng ở nơi bạn muốn hiển thị
<div class="container1">
      <img src="#" alt=""/>
      <input type="checkbox" name="" value=""/>
      <div class="heart">
        <i class="fas fa-heart"></i>
      </div>
    </div>
Nếu có thắc mắc gì hãy comment để mình hỗ trợ nhé!

Tham gia bình luận

( [img] url [/img] Để Comment gửi hình ảnh. )

4 Comments

  1. Góp ý là bạn đăng bài nên đầu tư thêm phần nội dung chữ ! Còn code của bạn rất hay

    ReplyDelete
    Replies
    1. Ohh Tks. Theo dõi Blog sẽ có nhiều bài mới hấp dẫn nhé

      Delete