Having trouble with a hover effect that works in Chrome but not in MSIE. Are there any alternatives or fixes to make it work in MSIE? The hover/rollover effects I've tried all seem to have this issue in IE.
normalize.css
demo.css
set2.css
font-awesome.min.css
HTML Markup - Page
<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,800,500,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="../Style Library/css/normalize.css">
<link rel="stylesheet" type="text/css" href="../Style Library/css/demo.css">
<link rel="stylesheet" type="text/css" href="../Style Library/css/set2.css">
<link rel="stylesheet" type="text/css" href="../Style Library/fonts/font-awesome-4.2.0/css/font-awesome.min.css"
</head>
<body>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript" ></script>
<div class="container">
<div class="content">
<h2>Goliath</h2>
<div class="grid">
<figure class="effect-goliath">
<img src="Site%20Documents/23.jpg" alt="img23"/>
<figcaption>
<h2>Thoughtful <span>Goliath</span></h2>
<p>When Goliath comes out, you should run.</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-goliath">
<img src="Site%20Documents/24.jpg" alt="img24"/>
<figcaption>
<h2>Thoughtful <span>Goliath</span></h2>
<p>When Goliath comes out, you should run.</p>
<a href="#">View more</a>
</figcaption>
</figure>
</div>
</div><!-- /container -->
</body>
</html>
Works fine in Chrome (cursor hovers on the right panel)
Not functioning in MSIE 11 :(