Images are a big part of any site these days. As CSS3 allows us to decorate and stylize our sites to look more attractive and more elegant. So, it also comes with a lot tricks to customize images on our sites. You can create a lot of cool stuff using CSS3.
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.
Muhammad Arslan Aslam
I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.
Get Free Email Updates to your Inbox!
Post a Comment
Suggestions will be greeted.