<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class = "container">
<div class = "row text-center">
<h1>Image Hover Effect</h1>
</div>
<h2>CSS3 Filter Effect</h2>
<div class = "row">
<a href = "#" class = "column col-xs-6" id = "sepia"><img src = "https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/041ba526957515.56361c211db4e.png"><p>Sepia</p></a>
<a href = "#" class = "column col-xs-6" id = "grayscale"><img src = "https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/ff8a2426957515.56361c212331c.png"><p>Grayscale</p></a>
</div>
<h2>CSS3 Transform Effect</h2>
<div class = "row">
<a href = "#" class = "column col-xs-6" id = "zoomIn"><figure><img src = "https://upload.wikimedia.org/wikipedia/commons/1/19/Thunderstorm_in_sydney_2000x1500.png"></figure><p>Zoom In</p></a>
<a href = "#" class = "column col-xs-6" id = "zoomOut"><figure><img src = "https://upload.wikimedia.org/wikipedia/commons/3/3c/GoldenMedows.jpg"></figure><p>Zoom Out</p></a>
</div>
<h2>3D Hover Effect</h2>
<div class = "row">
<div class = "tdimension">
<a href = "#">
</a>
</div>
</div>
<h2>Hover Effect With Caption</h2>
<div class = "row">
<a href = "#" class = "column col-xs-6" id = "caption"><span class = "text"><h1>Thunder</h1></span><img src = "https://upload.wikimedia.org/wikipedia/commons/1/19/Thunderstorm_in_sydney_2000x1500.png"></a>
<div class = "frame col-xs-6">
<img src = "https://pbs.twimg.com/profile_images/378800000601617732/9e87878ffdd67333ac8b81f9da22696a_400x400.jpeg">
<div class = "details">
<h1>Lorem</h1>
