JSFiddle - React, Tailwind, and code Playground

HTML

<div id="c">
    <img src="http://www.google.ru/logos/2011/valentines11-hp.jpg" />
    <div class="bg"></div>
    <div class="text">
        <h2>Some title</h2>
        <p>Some text</p>
    </div>
</div>

CSS

#c img, #c div { z-index:0; position:absolute;width:400px;height:200px; }
#c .bg {
    z-index:1;
    background:white;
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
}
#c .text {
    z-index:2;
    padding:20px;
}
#c .text p, #c .text h2 { line-height:1.5em; }
#c h2 { font-size:2em; }

JavaScript

//$('.blink').slideUp();
//$('.blink').slideDown();
// if the above two lines are executed, blink (below) on IE works.
// if the above two lines are not executed, blink (below) on IE does not work.
$('#c').mouseenter(function(){
    $('.bg').fadeOut(2000);
});
$('#c').mouseleave(function(){
    $('.bg').fadeIn(1000);
});
setInterval(function(){
    $('.text p').html( 'filter:' + $('.bg').css('filter') );
},50);

// something in slideUp/slideDown causes blink on dynamically generated content to work in IE ?