Image Color Change on Mouse Hover

Written by @kerixa 3 March 2021

To have a dynamic and attractive website for the visitors, elements must be such that attract more audiences. One of these elements is photo. Because visitors are more inclined to see the photo than to read long texts. For this reason, we must use special styles to make these photos more attractive. One of these styles is the presence of effects on the mouse hover. In the following code, the photo which is normally black and white, becomes gradually colorful when it is pointed by the mouse cursor.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
.color img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -webkit-transition: all 1s ease;
}

    .color img:hover {
        filter: grayscale(0%);
        filter: gray;
        -webkit-filter: grayscale(0%);
        filter: none;
        transition: 1s ease;
    }
</style>
<div class="color">
<img src="http://www.htmlfreecode.com/files/sunset.jpg" width="350"/>    
</div>
<a target="_blank" href="http://www.htmlfreecode.com/" style="font-size: 8pt; text-decoration: none;font-family:Tahoma">HTML Free Code</a>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300