This is an another css3 effect. It will done by simple css code filter properties. On hover the image it shows the color picture and when you mouse out from the image it shows the gray scale image. You can filter any types image in to grayscale image using css3 filter option. The below code helps you to filter the image.
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
the above code is display the image in black and white. when you set the filter:grayscale(0%) again the image color turned the original color. Here is the full code and live demo available in the below example for your better understanding. I hope this post is very useful.
the above code is display the image in black and white. when you set the filter:grayscale(0%) again the image color turned the original color. Here is the full code and live demo available in the below example for your better understanding. I hope this post is very useful.
Code for Gray Scale Effect using Css3:
<html>
<head>
<title>Gray Scale effect 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;
}
.hover08 figure img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover08 figure:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
</style>
</head>
<body>
<div class="hover08 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