Bootstrap Snippet Hover Effects using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
.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}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Hover Effects"
Bootstrap 3.3.0 Snippet by misho

Related: See More

Questions / Comments:

"Hover Effects" Bootstrap 3.3.0 Snippet by misho

Related: See More

Questions / Comments:

"Hover Effects"
Bootstrap 3.3.0 Snippet by misho