• GoDaddy Community
  • Websites + Marketing | Website Builders
  • Websites + Marketing | Website Builders

    cancel
    Showing results for 
    Show  only  | Search instead for 
    Did you mean: 
    Go to solution
    Highlighted

    Change black & white image to color by rolling over it

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

    2 REPLIES 2
    Solution

    Re: Change black & white image to color by rolling over it

    @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).

    ~Jan Mykhail Hasselbring Web Administrator @ fullstackwebsolution.com
    Community Manager
    Community Manager

    Re: Change black & white image to color by rolling over it

    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. 

     

    JesseW - GoDaddy | Community Manager | 24/7 support available at x.co/247support | Remember to choose a solution and give kudos.