Image to be grayed in IE 9+

57 views Asked by At

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 

Fiddle

1

There are 1 answers

0
altocumulus On BEST ANSWER

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 set opacity: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:

<image x="0" y="0" width="96" height="53" xlink:href="https://dl.dropboxusercontent.com/u/18190667/img.jpg" />
<image class="gray" filter="url('#filtersPicture')" x="0" y="0" width="96" height="53" xlink:href="https://dl.dropboxusercontent.com/u/18190667/img.jpg" />

Check the updated JSFiddle.