Change image on hover

  • Resolved _Flo_

    (@_flo_)


    7 years, 9 months ago

    Hi,

    i use the widget for showing logos in the sidebar.

    Images are showing up fine.

    But i want to chage the logo to a different image on hover (black-white image and on hover color logo image)

    I tried it with different css code but i can′t get it working.

    Please help me with some code for this, i think it can′t be that hard (maybe there is just something missing in my code).

    Thank you very much.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Goran87

    (@goran87)

    Hi Flo,

    actually this is a bit more complicated because you would need to use jquery if u want to change image with another one. BUT in your case, u want just to switch black/white image with color one, so lets do it via css:

    https://stackoverflow.com/questions/7273927/image-greyscale-with-css-re-color-on-mouse-over

    
.swifty-img-widget-class img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

.swifty-img-widget-class img:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

    Try it out

    • This reply was modified 7 years, 9 months ago by Goran87.
    Thread Starter _Flo_

    (@_flo_)

    Hi Goran,

    thx for your fast response!

    I had a look at the link you provided and found the solution.

    Just used this bit of css code and now it is working fine.

    .swifty-img-widget-class img {
  filter: url(filters.svg#grayscale);
  /* Firefox 3.5+ */
  filter: gray;
  /* IE6-9 */
  -webkit-filter: grayscale(1);
  /* Google Chrome & Safari 6+ */
}

.swifty-img-widget-class img:hover {
  filter: none;
  -webkit-filter: none;
}

    Thanks a lot again!

    Plugin Author Goran87

    (@goran87)

    Awesome!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change image on hover’ is closed to new replies.