[CSS Đẹp – P1] – Hiệu ứng kính trượt Sliding Glass đẹp khi hover hình ảnh với CSS
Hiệu ứng hover ảnh tạo các vệt sáng tối hay bóng gương phù hợp cho việc làm đẹp banner, ảnh sản phẩm hay logo. Các hiệu ứng này đều chỉ đơn giản với CSS + HTML
Kiểu 1: Vệt tối từ 2 bên chạy vào trong
Link demo: https://codepen.io/huy-n-l/pen/ZEQQgjL
Code:
<div class="hover-2">
<a href="https://daivietweb.com" class="banner">
<img src="https://daivietweb.com/images/banner-main-board.jpg" />
</a>
</div>
<style type="text/css">
.hover-2 a{
position:relative;
display:block;
width:100%;
height:100%;
overflow:hidden;
}
.hover-2 a:before{
border-color:#000 transparent transparent;
border-style:solid;
border-width:0;
content:"";
height:0;
left:0;
opacity:0.2;
position:absolute;
top:0;transition:all 0.5s ease-in-out;
width:0;
}
.hover-2 a:after{
border-color:transparent transparent #000;
border-style:solid;
border-width:0;
bottom:0;
content:"";
height:0;
opacity:0.2;
position:absolute;
right:0;
transition:all 0.5s ease-in-out;
width:0;
}
.hover-2 a:hover:before{
border-width:280px 250px 0 0;
transition:all 0.3s ease-in-out;
z-index:1;
}
.hover-2 a:hover:after{
border-width:0 0 280px 250px;
transition:all 0.3s ease-in-out;
z-index:1;
}
</style>
Kiểu 2: Hiệu ứng kính trượt liên tục trên ảnh
Link demo: https://daivietweb.com/demo/sliding-glass.html
Code html + css
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tiêu đề web </title>
<meta name="description" content="Đây là mô tả về trang web">
<style type="text/css">
.banner {position: relative;width: 600px;}
@keyframes light-left{0%{left:-5%;opacity:0}50%{left:50%;opacity:1}to{left:105%;opacity:0}}
@keyframes light-right{0%{right:-5%;opacity:0}50%{right:50%;opacity:1}to{right:105%;opacity:0}}
.banner a:after, .banner a:before {
content: "";
position: absolute;
top: 50%;
width: 30px;
height: 100%;
transform: translateY(-50%);
background-color: rgba(255,255,255,.75);
z-index: 999999999;
}
.banner a:before {
left: -5%;
animation: light-left 3s infinite alternate linear;
}
.banner a:after{
right: -5%;
animation: light-right 3s infinite alternate linear;
}
</style>
</head>
<body>
<div class="banner">
<a href="https://daivietweb.com">
<img src="iphone-x.jpg">
</a>
</div>
</body>
</html>
Kiểu 3: Hiệu ứng kính trượt khi hover chuột lên ảnh
Link demo: https://daivietweb.com/demo/image-hover.html
Code html + css:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tiêu đề web </title>
<meta name="description" content="Đây là mô tả về trang web">
<style type="text/css">
body {
padding-top: 60px;
}
.product{
background-color: #ddd;
padding: 10px;
width: 400px;
position: relative;
margin: 0 auto;
}
.product::after {
background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%) repeat scroll 0 0;
content: "";
display: block;
height: 100%;
position: absolute;
right: -75%;
top: 0;
transform: skewX(-25deg);
width: 50%;
z-index: 2;
}
.product:hover::after {
animation: 1s ease 0s normal none 1 running fixedAnim;
animation: 1s ease 0s normal none 1 running fixedAnim;
-webkit-animation: 1s ease 0s normal none 1 running fixedAnim;
-moz-animation: 1s ease 0s normal none 1 running fixedAnim;
}
@-webkit-keyframes fixedAnim {
0% {
right: 125%;
}
125% {
right: 0;
}
}
@-moz-keyframes fixedAnim {
0% {
right: 125%;
}
125% {
right: 0;
}
}
@keyframes fixedAnim {
0% {
right: 125%
}
125% {
right: 0;
}
}
</style>
</head>
<body>
<div class="product">
<img src="iPhone-11.jpg">
</div>
</body>
</html>