This is one of the interesting hover effect to show the gray scale with blur on hover the image with the help of the simple css3 code. Every gallery or product based images need to be some hover effect to attract the customers. The below image shows you to provide the hover effect with grayscale blur animation. Here is the demo page and the full code to better understand this effect. I hope this is very useful , we will see the next effect in another post.
Code for blur effect on hover the image:
<html>
<head>
<title>blur plus grayscale with caption using css3</title>
<style>
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
.column div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
.hover10 figure img {
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover10 figure:hover img {
-webkit-filter: grayscale(100%) blur(3px);
filter: grayscale(100%) blur(3px);
}
</style>
</head>
<body>
<div class="hover10 column">
<div>
<figure><img src="1.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="2.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="3.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="4.jpeg" /></figure>
<span>Hover Text</span>
</div>
</div>
</body>
</html>
<head>
<title>blur plus grayscale with caption using css3</title>
<style>
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
.column div span {
position: absolute;
bottom: -20px;
left: 0;
z-index: -1;
display: block;
width: 300px;
margin: 0;
padding: 0;
color: #444;
font-size: 18px;
text-decoration: none;
text-align: center;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
opacity: 0;
}
figure {
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
.hover10 figure img {
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover10 figure:hover img {
-webkit-filter: grayscale(100%) blur(3px);
filter: grayscale(100%) blur(3px);
}
</style>
</head>
<body>
<div class="hover10 column">
<div>
<figure><img src="1.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="2.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="3.jpeg" /></figure>
<span>Hover Text</span>
</div>
<div>
<figure><img src="4.jpeg" /></figure>
<span>Hover Text</span>
</div>
</div>
</body>
</html>
0 Comments