Change black & white image to color by rolling over it

[kwells3001]

Is there a way to change a black & white photo to color just by placing the mouse over it without opening a new window?

[JHasselbring · Accepted solution]

@kwells3001 

Can you please elaborate?

If I understand your question correctly, here's a couple of ways you can do that:

Use CSS pseudo selectors:

a#element_id{
  background: url('https://url.to/your/black&white/img.jpg');
}
a#element_id:hover{
  background: url('https://url.to/your/colored/img.jpg');
}

Use Javascript:

<img src="https://url.to/your/black&white/img.jpg"
   onmouseover="this.src='https://url.to/your/colored/img.jpg'"
   onmouseout="this.src='https://url.to/your/black&white/img.jpg'"
   border="0" alt=""/>

A more advanced CSS version exist where both black & white are in one image. Hovering changes the part of the image being shown.  It is used to reduce http requests (for performance).

[JesseW]

Hi @kwells3001. Thanks for being part of GoDaddy Community! If you're using the GoDaddy Website Builder, then no, you would be restricted to the options that are available within the builder. You can toggle an image between color and black and white in the editor, but that's the only place. If you are building your website using more traditional methods, then what @JHasselbring suggested above could work. Hope that helps.