Hover effect doesn't work on IE9

Question

Live site- http://www.orourkehospitality.com/hostedContent/williamsinn/

Hover effect doesn't work on IE9 but working perectly on Chrome, Safari, Mozila etc. Check screenshot below.

Any idea what is the issue & how to fix? I will provide code if needed(that is too long for that reason i skip now).

Answer 1

Add specific width and height for those images:

img.hover-images-flourish {
    width: 110px;
    height: 25px;
}

Answer 2

this worked for me

<img class="hover-images-flourish" src="http://www.orourkehospitality.com/hostedContent/williamsinn/wp-content/themes/williamsinn/images/hover-flourish-top.png" style="margin-top: 63px;width:100px:height:100px">

I have added

width:100px:height:100px  in your style

or you could

change it in css too

  .hover-images-flourish {
        width: 100px;
        height: 100px;
    }

IMPORTANT :

if the above fix doesn't work

add

<meta http-equiv="X-UA-Compatible" content="IE=9"/>

Answer 3

It seems that if you remove these properties from hover_pack.css

there is a style applied for IE only which seems to cause the issue:

.ie a.b-animate-go img{
   width:100% !important;
   height:100% !important;
}