Bootstrap Snippet Hover Effect using HTML CSS Bootstrap jQuery

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
29
30
31
32
33
34
35
36
37
<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 id="Technology-inner" class="text-center">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-7 technology-section">
<div class="col-md-4 technology-section-inner hvr-bounce-to-bottom">
<h4>html</h4>
<img src="img/Technology/img-1.png" class="img-responsive">
<div class="hover-show">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
</div>
</div>
<div class="col-md-4 technology-section-inner hvr-bounce-to-bottom">
<h4>wordprss</h4>
<img src="img/Technology/img-2.png" class="img-responsive">
<div class="hover-show">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
</div>
</div>
<div class="col-md-4 technology-section-inner hvr-bounce-to-bottom">
<h4>PHP</h4>
<img src="img/Technology/img-3.png" class="img-responsive">
<div class="hover-show">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-4 technology-section-inner hvr-bounce-to-bottom">
<h4>magento</h4>
<img src="img/Technology/img-4.png" class="img-responsive">
<div class="hover-show">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
29
30
31
32
33
34
35
36
37
/*/* Bounce To Bottom */
.hvr-bounce-to-bottom{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow:0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
  -webkit-transition-property:color;
  transition-property:color;
  -webkit-transition-duration:0.5s;
  transition-duration: 0.5s;
}
.hvr-bounce-to-bottom:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #36424a;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin:100% 50%;
  transform-origin:100% 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-bounce-to-bottom:hover, .hvr-bounce-to-bottom:focus, .hvr-bounce-to-bottom:active {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
29
30
31
32
33
34
35
36
37
var appMaster = {
    preLoader: function(){
        imageSources = []
        $('img').each(function() {
            var sources = $(this).attr('src');
            imageSources.push(sources);
        });
        if($(imageSources).load()){
            $('.pre-loader').fadeOut('slow');
        }
    },
    smoothScroll: function() {
        // Smooth Scrolling
        $('a[href*=#]:not([href=#carousel-example-generic])').click(function() {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    },
    reviewsCarousel: function() {
        // Reviews Carousel
        $('.review-filtering').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: true,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Hover Effect"
Bootstrap 3.3.0 Snippet by AkshSoel

Related: See More

Questions / Comments:

"Hover Effect" Bootstrap 3.3.0 Snippet by AkshSoel

Related: See More

Questions / Comments:

"Hover Effect"
Bootstrap 3.3.0 Snippet by AkshSoel