Bootstrap Snippet Creative Lightbox hover using HTML CSS Bootstrap Javascript

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/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.8.5/venobox.css">
<section class="project-area">
    <div class="container">
        <div class="row grid">
            <div class="col-md-3"> 
              <div class="grid-item mouse-move">
                <a href="#">
                  <img src="https://envytheme.com/tf-demo/edusplash/assets/img/publication/1.jpg" alt="Project">
                </a>
                <div class="grid-hover">
                  <h3>Local SEO Marketing</h3>
                  <span>Creative Design</span>
                </div>
                <div class="grid-hover-link">
                  <a href="#"><span class="fa fa-link"></span></a>
                  <a class="venobox vbox-item" data-gall="myGallery" data-title="Modern Architect" href="http://www.kiathemes.in/tf/lavala-preview/img/projects/1.jpg"><span class="fa fa-arrows-alt"></span></a>
                </div>
              </div>          
            </div>
            <div class="col-md-3"> 
              <div class="grid-item mouse-move">
                <a href="#">
                  <img src="https://envytheme.com/tf-demo/edusplash/assets/img/publication/2.jpg" alt="Project">
                </a>
                <div class="grid-hover">
                  <h3>Local SEO Marketing</h3>
                  <span>Creative Design</span>
                </div>
                <div class="grid-hover-link">
                  <a href="#"><span class="fa fa-link"></span></a>
                  <a class="venobox vbox-item" data-gall="myGallery" data-title="Modern Architect" href="http://www.kiathemes.in/tf/lavala-preview/img/projects/2.jpg"><span class="fa fa-arrows-alt"></span></a>
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
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Poppins:400,400i,500,600,700,800");
    .project-area .section-title h2 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 3.5rem;
}
@media (max-width: 767px) {
  .project-area .section-title h2 {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
  }
}
.grid > [class*=col-] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.grid-item {
  position: relative;
}
.grid-item img {
  width: 100%;
}
.grid-item:hover .grid-hover-link {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transition: 0.5s;
  -ms-transition: 0.5s;
  transition: 0.5s;
}
.grid-hover {
  position: absolute;
  width: 100%;
  height: 100%;
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
(function ($) {
  "use strict";
  /*------------------------------------
    Search Option
  ------------------------------------- */
  $('.search-btn-area .input-group').hide();
  $(".main-search").on('click', function(event) {
    event.preventDefault();
    $('.search-btn-area .input-group').animate( {
      height: 'toggle',
    });
  });
  /*---------------------
    Selectize
  ---------------------*/
  if($('select').length){
    $('select').selectize();
  }
  /*--------------------------
    Scroll Sticky
  ---------------------------- */
  var windows = $(window);
  var Header = $(".header-bottom");  
  if (Header.length) {
    windows.on('scroll', function() {
      var scroll = windows.scrollTop();
      if (scroll > 200) {
        $(".header-bottom").addClass('stick');
      }
      else {
        $(".header-bottom").removeClass('stick');
      }
    });
  }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Creative Lightbox hover"
Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"Creative Lightbox hover" Bootstrap 4.1.1 Snippet by koshikojha

Related: See More

Questions / Comments:

"Creative Lightbox hover"
Bootstrap 4.1.1 Snippet by koshikojha