CODEWITHSUNDEEP
hover
Cassondra Bazelow
Cassondra Bazelow

Reputation: 1

I Want to Change Images Using Hover

I've been coding my portfolio website from scratch and I want to implement an image change (black and white to color) when I hover over the thumbnails in my gallery. Is there a way to do this easily? I have 14 images, two pictures each (color and black and white).

Thanks!

Upvotes: 0

Views: 46

Answers (1)

Dmitriy Tkachenko
Dmitriy Tkachenko

Reputation: 324

You can save some traffic for you and your visitors and only have one color image, which you can desaturate using CSS filter.

Assign the class to your image in HTML: <img class="image-bw" src="image.jpeg"/>

Make your image black and white in non-hovered state by using this CSS:

.image-bw {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

And turn off this filter in hovered state:

.image-bw:hover {
    -webkit-filter: none;
    filter: none;   
}

Take into account that this solution will not work in IE. Refer here for detailed browser compatibility information. You may also use SVG images, which can be desaturated in IE, as described here.

If you want to use two images, several ways to do so are described in this question.

Upvotes: 1

Related Questions