Question 44467 in Html Question posted in
Some basic documentation can be found here.

How to show actual colour of an image on hover – Html

So I am creating a website and have several logos to place in a section, how can I keep their default colour gray and when a user hovers on a logo, it reveals the actual colours of the logo, the logo has several colours so I can’t do a simple colour change to a single colour. For eg. the python logo should have both blue and yellow on hover and complete gray without hover.

I know how to change to a single colour only

Tags:

2

Answers


  1. 0

    You need two vwersions of your logo: gray and color, an then swap them on hover like

    this:
div {
    background: url('gray-logo.png');
}
div:hover {
    background: url('color-logo.png');
}
    Login or Signup to reply.
  2. 0

    Use the filter: grayscale() in CSS. grayscale(1) will grayout an image will on :hover can use grayscale(0) to reset the grayout and show the image in color:

    img {
max-height: 70vh;
  max-width: 70vw;
  filter: grayscale(1);
}

img:hover {
  filter: grayscale(0);
    <img src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search