
The above images is Gray Scaled with CSS3. May be its's not such a good idea to use such old styles on our sites these days. But what if, when we hover over the image, it turns colorful?
Yeah! It sounds cool.
Check out here: Example
Now, let's see how to create this.
We can do this effect using CSS Image Filters. Image filters are like Photoshop Filters for browser.
Filters can be applied to any image with a simple line of code:
img {
filter: grayscale(50%);
}
To create the effect as it is in above example, there are many ways.
We will be using a simplest trick to do so. Just look at this code snippet:
.tint img {
display: block;
transition: all 0.7s linear;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
.tint img:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
}
In the above snippet we have a div named .tint , which contains image that on which we want to apply the style. transition: all 0.7s linear; will create some cool transitional effect on hover, so it don't change its color at once.
The strategy we are using in creating this effect is very simple. When the image is loads its already gray-scaled to 100% (filter: grayscale(100%);).
And as we can see in the .tint img:hover , the grayscale is turned to 0% , so that it comes into its original condition (full colored).
Have a look at this codepen:
See the Pen Simple but nice looking Image Tint by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.
Post a Comment
Suggestions will be greeted.