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ùng 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;
}

Code HTML

<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é!