<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"> <div class="col-md-3"> <div class="gallery-category"> <div class="simple-image"> <img width="275" height="450" src="http://136.243.1.253/~creolitic/bootsnipp/living.jpg" alt=""> <div class="title__rotation"> <h1 class="widget-title">Living room</h1> </div> <div class="content"> <p>View all images</p> </div> <div class="hover__active"> <p class="more"> <span class="glyphicon glyphicon-search" aria-hidden="false"></span> <a href="#">view gallery</a> </p> </div> </div> </div> </div> </div> </div>

.category-home{position:relative}.simple-image{position:relative;width:100%;height:100%;background:#000;overflow:hidden}.simple-image img{filter:url("data:image/svg+xml;utf8,<svgxmlns=\'http://www.w3.org/2000/svg\'><filterid=\'grayscale\'><feColorMatrixtype=\'matrix\'values=\'0.33330.33330.3333000.33330.33330.3333000.33330.33330.33330000010\'/></filter></svg>#grayscale");filter:gray;-webkit-filter:grayscale(100%);opacity:.3}.simple-image:hover img{filter:none;-webkit-filter:grayscale(0%);opacity:1}.title__rotation h1{font-size:13px;color:#dcdcdc;font-family:'Museo Sans Cyrl 100';font-weight:200;position:absolute;width:100%;bottom:150px;left:-100px;text-transform:uppercase;transform:rotate(270deg) scale(1) skew(0deg) translate(0px);-webkit-transform:rotate(270deg) scale(1) skew(0deg) translate(0px);-moz-transform:rotate(270deg) scale(1) skew(0deg) translate(0px);-o-transform:rotate(270deg) scale(1) skew(0deg) translate(0px);-ms-transform:rotate(270deg) scale(1) skew(0deg) translate(0px)}.title__rotation h1:after{content:'';width:0;background:#fff;position:absolute;margin-left:20px;top:6px;height:1px}.simple-image:hover h1:after{width:60px}.simple-image:hover h1{color:#fff}.simple-image .content{position:absolute;text-align:center;text-transform:uppercase;top:0;margin:0 auto;display:block;left:0;right:0;padding:185px 15px;opacity:1;z-index:9999;color:#fff}.simple-image:hover .content{opacity:0;height:0;padding:0 15px}.hover__active{opacity:0;bottom:0;position:absolute;z-index:999;margin:0 auto;left:-25px;right:0;text-align:center;color:#fff}.simple-image,.simple-image:hover,.hover__active,.simple-image .content,.title__rotation:after,.simple-image img,.title__rotation h1:after,.projects .img,.projects .img img{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}.hover__active span{background:#fecb30;width:48px;height:48px;border-radius:50%;text-align:center;vertical-align:middle;padding-top:17px;display:block;left:0;right:0;margin:0 auto;margin-bottom:10px}.simple-image:hover .hover__active{opacity:1;bottom:35%}.hover__active a{color:#fff;text-transform:uppercase;font-size:12px;margin:0 auto;left:0;right:0}