Thủ thuật sử dụng CSS hiển thị link tuyệt đẹp khi hover

Thủ thuật này mình cũng không biết phải miêu tả như thế nào. Đơn giản là hiển thị link khi bạn rê chuột vào một liên kết trong blog, để hiểu rõ hơn thì xem demo ngay tại đây. Rê chuột vào 3 liên kết dưới đây hoặc bất cứ liên kết nào trong blog mình tại bài viết này.
Để thực hiện, các bạn làm như sau.
Bước 1: Đăng nhập Blogger Mẫu Chỉnh sửa HTML.
Bước 2: Dán đoạn CSS dưới vào sau thẻ <body> trong template.
.post-body a::before{
content: attr(href);
float: none;
clear: both;
font-size: 22px;
font-family: "Roboto",sans-serif;
font-weight: 300;
text-transform: none;
padding: 15px 0;
background: #fff;
color: #55579e;
border-radius: 0;
position: fixed;
opacity: 0;
left: 0;
top: 0;
visibility: hidden;
transform: scaleY(0);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
width: 100%;
transition: .3s ease-in-out;
z-index: 999;
margin: 0 auto;
}
.post-body a:hover::before{
opacity:1;
visibility:visible;
transform:scaleY(1)
}
Bước 3: Lưu template.
Xin chào các bạn mình là một người có niềm đam mê mãnh liệt với công việc thiết kế Website, đặc biệt với Blogger. Bắt đầu tìm hiểu và tự học hỏi trên mạng từ năm 2012, và hiện tại dành 100% thời gian cho công việc trên Internet.

Bình Luận