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 Sharetemplate2019 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>