<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">
<h1>CSS Image Hover Effects</h1>
<p>← <a href="http://www.nxworld.net/tips/css-image-hover-effects.html" target="_blank">View the article</a></p>
<h2 id="demo12">1. Opacity #2</h2>
<div class="hover12 column">
<div>
<figure><div class="water"><img src="https://49.media.tumblr.com/f3c9e15a689925e42476eb4240d8d1ce/tumblr_n4oxmzniLQ1rcasfmo1_r1_500.gif" /></div></figure>
<span>born</span>
</div>
<div>
<figure style="background-color:#9b59b6;"><div class="water"><img src="http://www.sikharchives.com/wp-content/uploads/2012/03/khalistan_flag.gif"/></div></figure>
<span>to</span>
</div>
<div>
<figure style="background-color:#000;"><div class="gatka"><img src="http://3.bp.blogspot.com/-fasE7xNdLkA/VZos4O5bSwI/AAAAAAAADpI/vQym6JWapLI/s1600/gatka-sikh-martial-art-915x919.jpg"></div></figure>
<span>lead</span>
</div>
</div>
</div>
</div>
