Hiệu ứng Hover cho img Chất cho blogspot
xuất bản
Demo
Đầu tiên bạn kiểm tra blog bạn có link css này chưa, chưa có thì chèn thêm vào link css dưới:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
Tiếp đến là đoạn code hiển thị:
<div class="demo"><div class="container"><div class="row"><div class="col-md-4 col-sm-6"><div class="box"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAvP1Q_wSp2R2noBNpyMBUMiubB-EEpWM1d91Jg1zN8A2NEmT9huqvGtc8W1k7LQRFMaHoxGg2LNqrlHqNthL9l4KS72Cl6XgvS-XR_sfzwhxSEeBFxpDxIKA5ZVtq1x99D2CGU1fLc14/s640/Untitled.png"><div class="box-content"><div class="inner-content"><h3 class="title">CSS3 Hiệu ứng button đẹp</h3><span class="post">Bẽo Hòa Vinh</span></div><ul class="icon"><li><a href="#"><i class="fa fa-search"></i></a></li><li><a href="#"><i class="fa fa-link"></i></a></li></ul></div></div></div><div class="col-md-4 col-sm-6"><div class="box"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFP2061pIOkc084zvhCxstzIgQfOrECqH0uIWFeLBbn8vd9MzlGOxykcFrk1q315gSyqQDBIr7s2a4fWp4idEqxO7Ff2OfJDf0NSfrRUszjhHPls46zfJKYyH0TTqSrjn17o-BDjD2Hi0/s640/Untitled.png"><div class="box-content"><div class="inner-content"><h3 class="title">CSS Loader Đẹp</h3><span class="post">Bẽo Hòa Vinh</span></div><ul class="icon"><li><a href="#"><i class="fa fa-search"></i></a></li><li><a href="#"><i class="fa fa-link"></i></a></li></ul></div></div></div><div class="col-md-4 col-sm-6"><div class="box"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIPON85j7PlpOOFRDox-eYyFrfxCIHTddaUbAhXI8PsWxmwl8ahkAmIxBkCyGhu4Nwv4SxBEPLaRsO4zRuGuL3YJGPRoIW3izzCPgl_yc7k3zjhM2Ag3wRkeyN9zX8zky7XrCux-URSkk/s640/Untitled.png"><div class="box-content"><div class="inner-content"><h3 class="title">CSS3 Hiệu ứng ẩn hiện cho blogspot</h3><span class="post">Bẽo Hòa Vinh</span></div><ul class="icon"><li><a href="#"><i class="fa fa-search"></i></a></li><li><a href="#"><i class="fa fa-link"></i></a></li></ul></div></div></div></div></div></div>
Tiếp theo các bạn chèn css dưới vào b:skin
.demo{padding: 2em 0;}
.box{
text-align: center;
overflow: hidden;
position: relative;
}
.box img{
width: 100%;
height: 180px;
transform: scale(1.6);
transition: all 0.3s ease 0s;
}
.box:hover img{
filter: grayscale(100%);
transform: scale(1.2);
}
.box .box-content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
transition: all 0.2s ease 0s;
}
.box:before,
.box:after,
.box .box-content:before,
.box .box-content:after{
content: "";
width: 100%;
height: 25%;
background: linear-gradient(to right,rgba(0,0,0,0.9),rgba(0,0,0,0.7),transparent,rgba(0,0,0,0.7),rgba(0,0,0,0.9));
z-index: 1;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s ease 0s;
}
.box:before{ transform: translateX(100%); }
.box:after{
height: 25.1%;
top: 25%;
transform: translateX(-100%);
transition-delay: 0.05s;
}
.box .box-content:before{
top: 50%;
transform: translateX(100%);
transition-delay: 0.1s;
}
.box .box-content:after{
top: 75%;
transform: translateX(-100%);
transition-delay: 0.15s;
}
.box:hover:before,
.box:hover:after,
.box:hover .box-content:before,
.box:hover .box-content:after{ transform: translateX(0); }
.box .inner-content{
padding: 7px 0;
text-align: right;
position: absolute;
bottom: 10px;
right: 20px;
z-index: 2;
transition: all 0.3s ease 0s;
}
.box .title{
font-size: 22px;
font-weight: 700;
color: #faac01;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0 0 3px 0;
opacity: 0;
transform: translateY(150px);
transition: all 0.4s ease 0s;
}
.box .post{
display: inline-block;
padding: 0 5px;
font-size: 16px;
font-style: italic;
color: #fff;
opacity: 0;
transform: translateY(50px);
transition: all 0.4s ease 0s;
}
.box:hover .title,
.box:hover .post{
opacity: 1;
transform: translate(0, 0);
}
.box .icon{
padding: 0;
margin: 0;
list-style: none;
position: absolute;
top: -200px;
left: 10px;
z-index: 2;
transition: all 0.4s ease 0.2s;
}
.box:hover .icon{ top: 15px; }
.box .icon li a{
display: block;
width: 40px;
height: 40px;
line-height: 40px;
background: #faac01;
font-size: 20px;
color: #fff;
margin-bottom: 10px;
position: relative;
transition: all 0.3s ease 0s;
}
.box .icon li a:hover{
text-decoration: none;
border-radius: 30%;
background: #fff;
color: #faac01;
}
.box .icon li a i {
line-height: 40px;
}
@media only screen and (max-width:990px){
.box{ margin-bottom: 30px; }
}
@media only screen and (max-width:479px){
.box .title{ font-size: 18px }
}
Copyright © 2018
Chúc mừng, bạn là người đầu tiên!