I want image to be grayed in IE 9+ and when I hover mouse it show original
Everything is working fine but thing is that when I do hover it scales image
find code in below fiddle
I want image to be grayed in IE 9+ and when I hover mouse it show original
Everything is working fine but thing is that when I do hover it scales image
find code in below fiddle
The scaling is caused by your jpg being slightly larger (105×58) than your svg (96×53). When the jpg is referenced by
<image>
it is scaled to fit the dimensions of<image>
. This works as expected for the grayed image, but fails for the hover effect. On hover you setopacity:0
for the<image>
which renders the svg's background visible. The background image, however, is not scaled to fit the dimensions, but rather clipped to your svg's size. Hence the difference in scale.To circumvent these problems I would prefer another approach getting rid of the background image. You could just place the original coloured image right underneath the grayed image. The grayed image will then obscure the coloured image until opacity is set to 0 on hover:
Check the updated JSFiddle.