<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> <!------ Include the above in your HEAD tag ----------> <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>

body { color: #333; font-family: 'Open Sans', sans-serif; font-weight: 300; } h1, h1 + p { background: black none repeat scroll 0 0; color: white; font-weight: 300; margin: 15px 15px 0; padding: 10px; width:69%; } h1+p a { color: #fff; text-decoration:none; } h1+p a:hover { text-decoration: none; } h2 { background: black none repeat scroll 0 0; color: white; font-weight: 300; font-size:14px; margin: 13px 15px 0; padding: 6px; width: 15%; }h2 span { margin-left: 1em; color: #aaa; font-size: 85%; } .column { margin: 15px 15px 0; padding: 0; } .column:last-child { padding-bottom: 60px; } .column::after { content: ''; clear: both; display: block; } .column div { position: relative; float: left; width: 300px; height: 200px; margin: 0 0 0 25px; padding: 0; } .column div:first-child { margin-left: 0; } .column div span { background: black none repeat scroll 0 0; bottom: 20px; color: #fff; display: block; font-size: 20px; left: 0; margin: 0; opacity: 0; padding: 0; position: absolute; text-align: center; text-decoration: none; transition: all 0.3s ease-in-out 0s; width: 300px; z-index: -1; font-weight: 500; } figure { width: 300px; height: 200px; margin: 0; padding: 0; background: #fff; overflow: hidden; } figure:hover+span { bottom: -36px; opacity: 1; } .hover12 figure { background: #1abc9c; } .hover12 figure img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover12 figure:hover img { opacity: .5; } .water img { width: 100%; height: 100%; } .gatka img { width: 100%; height: 130%; }