Chia sẻ với mọi người một số hiệu ứng Hover hữu dụng khi làm web Frontend. Có thể ứng dụng vào làm hiệu ứng Hover cho Avatar của ảnh bài viết, ảnh sản phẩm.
1. Hiệu ứng Hover ZoomIn
<div class="col-md-4 hover-zoomin">
<a href="#" title="" class="rounded">
<img class="" src="image/path" alt="" />
</a>
<h6 class="text-center mt-2">Hover ZoomIn</h6>
</div>
.hover-zoomin a
{
display: block;
position: relative;
overflow: hidden;
}
.hover-zoomin img
{
width: 100%;
height: auto;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hover-zoomin:hover img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
border-radius: .25rem !important
}
Hover ZoomIn
2. Hiệu ứng Hover Fade
<div class="col-md-4 hover-fade">
<a href="#" title="" class="rounded">
<img src="image/path" alt="" />
</a>
<h6 class="text-center">Hover Fade</h6>
</div>
.hover-fade a
{
display: block;
position: relative;
overflow: hidden;
background-color: #333;
}
.hover-fade img
{
width: 100%;
height: auto;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hover-fade:hover img
{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.5)";
filter: alpha(opacity=0.5);
opacity: 0.5;
}
Hover Fade
3. Hiệu ứng Hover Blur
<div class="col-md-4 hover-blur">
<a href="#" title="" class="rounded">
<img src="image/path" alt="" />
<h2><span class="text-white">SơnPc 20</span></h2>
</a>
<h6 class="text-center">Hover Blur</h6>
</div>
.hover-blur a
{
display: block;
position: relative;
overflow: hidden;
}
.hover-blur img
{
width: 100%;
height: auto;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hover-blur:hover img
{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
-webkit-filter: grayscale(0.6) blur(1px);
filter: grayscale(0.6) blur(1px);
}
.hover-blur a h2
{
display: block;
position: absolute;
top: 0;
left: 0;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
width: 100%;
padding: 45% 20px;
text-align: center;
background-color: rgba(0,0,0,0.5);
/*background dotted*/
background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
background-image: repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
-webkit-background-size: 3px 3px;
-moz-background-size: 3px 3px;
background-size: 3px 3px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.hover-blur:hover a h2
{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.hover-blur .text-white
{
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.hover-blur:hover .text-white
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
opacity: 1;
}
SơnPc 20
Hover Blur
4. Hiệu ứng Hover Mask
<div class="col-md-4 hover-mask">
<a href="#" title="" class="rounded">
<img src="image/path" alt="" />
<h2><span class="fa fa-search text-white"></span></h2>
</a>
<h6 class="text-center">Hover Mask</h6>
</div>
.hover-mask a
{
display: block;
position: relative;
overflow: hidden;
}
.hover-mask img
{
width: 100%;
height: auto;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hover-mask:hover img
{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.hover-mask a h2
{
display: block;
position: absolute;
top: 0;
left: 0;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
width: 100%;
padding: 45% 20px;
text-align: center;
background-color: rgba(0,0,0,0.4);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.hover-mask:hover a h2
{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.hover-mask .fa
{
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
color: #fff;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.hover-mask:hover .fa
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
opacity: 1;
}
Hover Mask
5. Hiệu ứng Hover Zoomout
<div class="col-md-4 hover-zoomout">
<a href="" title="" class="rounded">
<img src="image/path" alt="" />
</a>
<h6 class="text-center mt-2">Hover Zoomout</h6>
</div>
.hover-zoomout a
{
display: block;
position: relative;
overflow: hidden;
}
.hover-zoomout img
{
width: 100%;
height: auto;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.hover-zoomout:hover img
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
Hover Zoomout
6. Hiệu ứng Hover Blurout
<div class="col-md-4 hover-blurout">
<a href="#" title="" class="rounded">
<img src="image/path" alt="" />
<h2><span class="glyphicon glyphicon-search"></span></h2>
</a>
<h6 class="text-center mt-2">Hover Blurout</h6>
</div>
.hover-blurout a
{
display: block;
position: relative;
overflow: hidden;
}
.hover-blurout img
{
width: 100%;
height: auto;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
.hover-blurout:hover img
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
/*Blur Filtr*/
-webkit-filter: grayscale(0.6) blur(1px);
-moz-filter: grayscale(0.6) blur(1px);
-o-filter: grayscale(0.6) blur(1px);
-ms-filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
filter: progid:DXImageTransform.Microsoft.blur(pixelradius=2);
filter: grayscale(0.6) blur(2px);
}
.hover-blurout a h2
{
display: block;
position: absolute;
top: 0;
left: 0;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
width: 100%;
padding: 45% 20px;
text-align: center;
background-color: rgba(0,0,0,0.4);
/*background dotted*/
background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
background-image: repeating-radial-gradient(center center, rgba(0,0,0,.8), rgba(0,0,0,.8) 1px, transparent 1px, transparent 100%);
-webkit-background-size: 3px 3px;
-moz-background-size: 3px 3px;
background-size: 3px 3px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.hover-blurout:hover a h2
{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.hover-blurout .glyphicon
{
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
color: #fff;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.hover-blurout:hover .glyphicon
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";
filter: alpha(opacity=1);
opacity: 1;
}
Hover Blurout
7. Hiệu ứng Hover Overlay Text
<div class="overlay-item overlay-effect rounded">
<img src="image/path" alt="" />
<div class="mask">
<h3>SơnPC 20</h3>
<p>
Chào mừng các bạn tới website của tôi
</p>
<a href="http://sonpc20.com" class="btn btn-primary">Đọc thêm</a>
</div>
</div>
.overlay-item
{
display: block;
position: relative;
overflow: hidden;
text-align: center;
}
.overlay-item .mask
{
display: block;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
height: 100%;
}
.overlay-item img
{
display: block;
width: 100%;
height: auto;
x-margin-right: auto;
x-margin-left: auto;
}
.overlay-item h3
{
text-transform: uppercase;
text-align: center;
position: relative;
padding: 10px;
margin: 0px 0px 20px 0px;
display: block;
background-color: #333;
color: #fff;
}
.overlay-item p
{
text-align: left;
}
.overlay-item a.btn
{
margin: 10px 0;
}
.overlay-effect img
{
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.overlay-effect .mask
{
background-color: rgba(255, 255, 255, 0.3);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.overlay-effect h3
{
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.overlay-effect p
{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.overlay-effect a.btn
{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.overlay-effect:hover img
{
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.overlay-effect:hover .mask
{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.overlay-effect:hover h3, .overlay-effect:hover p, .overlay-effect:hover a.btn
{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
Overlay Text
8. Hiệu ứng Hover Fall
<div class="fall-item fall-effect rounded">
<img src="image/path" />
<div class="mask">
<h2>SơnPC 20</h2>
<p>Chào mừng các bạn tới website của tôi</p>
<a href="http://sonpc20.com" class="btn btn-primary">Đọc thêm</a>
</div>
</div>
.fall-item
{
width: 100%;
height: auto;
overflow: hidden;
position: relative;
text-align: center;
}
.fall-item .mask, .fall-item .content
{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.fall-item img
{
display: block;
position: relative;
width: 100%;
height: auto;
}
.fall-item h2
{
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 0 0 0 0;
}
.fall-item p
{
font-style: italic;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.fall-effect .mask
{
background-color: rgba(255, 255, 255, 0.7);
top: -200px;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s ease-out 0.5s;
-moz-transition: all 0.3s ease-out 0.5s;
-o-transition: all 0.3s ease-out 0.5s;
-ms-transition: all 0.3s ease-out 0.5s;
transition: all 0.3s ease-out 0.5s;
}
.fall-effect h2
{
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.1s;
-moz-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
-ms-transition: all 0.2s ease-in-out 0.1s;
transition: all 0.2s ease-in-out 0.1s;
}
.fall-effect p
{
color: #333;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
-ms-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
}
.fall-effect a.btn
{
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.3s;
-moz-transition: all 0.2s ease-in-out 0.3s;
-o-transition: all 0.2s ease-in-out 0.3s;
-ms-transition: all 0.2s ease-in-out 0.3s;
transition: all 0.2s ease-in-out 0.3s;
}
.fall-effect:hover .mask
{
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
top: 0px;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
.fall-effect:hover h2
{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.fall-effect:hover p
{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.fall-effect:hover a.btn
{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
Hover Fall
Sơn 20 Sưu tầm
