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

Popular posts from this blog

Vui Trung Thu nhận quà vi vu cùng Z.com Việt Nam

Vietnix Free DirectAdmin, Giảm 30% trọn đời dịch vụ VPS

Deals HOT Khuyến mãi tháng 9 tại BKHOST