Để tạo hiệu ứng line effect khi hover này, các bạn chỉ cần coppy toàn bộ đoạn CSS bên dưới của mình, và dán vào khung CSS Tùy Chỉnh trong Tùy Biến của Theme là được.

/*line effect animation by tiencuong.info*/
.post-item .col-inner::before, .post-item .col-inner::after{
content:"";
width: 0;
height: 2px;
z-index:1;
position: absolute;
transition: all 0.2s linear;
background: #f8be00;
box-shadow:
transition:400ms ease all;
transition-delay: 0.3s;
}
.post-item .col-inner .box::before, .post-item .col-inner .box::after{
content:"";
width:2px;
height:0;
z-index:1;
position: absolute;
transition: all 0.2s linear;
background: #f8be00;
transition:400ms ease all;
transition-delay: 0s;
}
.post-item .col-inner:hover::before, .post-item .col-inner:hover::after{
width: 100% ;
}
.post-item .col-inner:hover .box::before, .post-item .col-inner:hover .box::after{
height: 100%;
}
.post-item .col-inner::before{
right: 0;
top: 0;
}
.post-item .col-inner::after{
left: 0;
bottom: 0;
}
.post-item .col-inner .box::before{
left: 0;
top: 0;
}
.post-item .col-inner .box::after{
right: 0;
bottom: 0;
}
.post-item .col-inner:hover::before, .post-item .col-inner:hover::after{
transition-delay: 0s;
}
.post-item .col-inner:hover .box::before, .post-item .col-inner:hover .box::after{
transition-delay: 0.3s;
}

/*line effect animation by tiencuong.info*/

.post-item .col-inner::before, .post-item .col-inner::after{

content:"";

width: 0;

height: 2px;

z-index:1;

position: absolute;

transition: all 0.2s linear;

background: #f8be00;

box-shadow:

transition:400ms ease all;

transition-delay: 0.3s;

}

.post-item .col-inner .box::before, .post-item .col-inner .box::after{

content:"";

width:2px;

height:0;

z-index:1;

position: absolute;

transition: all 0.2s linear;

background: #f8be00;

transition:400ms ease all;

transition-delay: 0s;

}

.post-item .col-inner:hover::before, .post-item .col-inner:hover::after{

width: 100% ;

}

.post-item .col-inner:hover .box::before, .post-item .col-inner:hover .box::after{

height: 100%;

}

.post-item .col-inner::before{

right: 0;

top: 0;

}

.post-item .col-inner::after{

left: 0;

bottom: 0;

}

.post-item .col-inner .box::before{

left: 0;

top: 0;

}

.post-item .col-inner .box::after{

right: 0;

bottom: 0;

}

.post-item .col-inner:hover::before, .post-item .col-inner:hover::after{

transition-delay: 0s;

}

.post-item .col-inner:hover .box::before, .post-item .col-inner:hover .box::after{

transition-delay: 0.3s;

}

Chú ý: Để thay đổi màu hiệu ứng của line, các bạn chỉ cần thay đổi lại mã màu tại 2 dòng 9 và 21 thành màu phù hợp với tone màu chủ đạo trên website của các bạn.

5/5 - (1 bình chọn)

Học CSS

CSS tạo Line Effect khi hover

Bài viết mới cập nhật:

Nguyễn Tiến Cường

Bài Viết Cùng Chủ Đề:

Danh mục mẫu web

Từ khóa liên quan

Bài viết mới cập nhật:

Nguyễn Tiến Cường

Bài Viết Cùng Chủ Đề:

Đăng nhập

Đăng ký