"Creative Lightbox hover"
Bootstrap 4.1.1 Snippet by koshikojha

<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> </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/3.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/3.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/4.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/4.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/4.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/4.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/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> </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/3.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/3.jpg"><span class="fa fa-arrows-alt"></span></a> </div> </div> </div> </div> </div> </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.8.5/venobox.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/scrollup/2.4.1/jquery.scrollUp.js"></script>
@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%; left: 0; top: 0; z-index: 1; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .grid-hover::before { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(254, 72, 76, 0.9); z-index: -1; } .grid-hover h3 { position: relative; margin: -3.125rem 0 0.25rem; text-align: center; } @media (min-width: 992px) and (max-width: 1199px) { .grid-hover h3 { font-size: 1.3125rem; } } @media (min-width: 768px) and (max-width: 991px) { .grid-hover h3 { font-size: 1.25rem; margin: -2.5rem 0 0.25rem; } } .grid-hover span { font-weight: 500; position: relative; display: block; padding-bottom: 20px; } .grid-hover-link { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; padding-top: 5rem; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } @media (min-width: 768px) and (max-width: 991px) { .grid-hover-link { padding-top: 5.625rem; } } .grid-hover-link a { display: inline-block; width: 45px; height: 45px; line-height: 45px; border: 1px solid #ffffff; text-align: center; margin: 0 0.5rem; } .grid-hover-link a:hover { background-color: #ffffff; } .grid-hover-link a:hover span::before { color: #fe484c; } .grid-hover-link a span { display: inline-block; line-height: 1; } .mouse-move { overflow: hidden; perspective: 1600px; } .mouse-move .grid-hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: rotate3d(1, 0, 0, 90deg); transform: rotate3d(1, 0, 0, 90deg); pointer-events: none; } .mouse-move.in-top .grid-hover { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: in-top 0.3s ease 0s 1 forwards; animation: in-top 0.3s ease 0s 1 forwards; } .mouse-move.in-right .grid-hover { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-animation: in-right 0.3s ease 0s 1 forwards; animation: in-right 0.3s ease 0s 1 forwards; } .mouse-move.in-bottom .grid-hover { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: in-bottom 0.3s ease 0s 1 forwards; animation: in-bottom 0.3s ease 0s 1 forwards; } .mouse-move.in-left .grid-hover { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-animation: in-left 0.3s ease 0s 1 forwards; animation: in-left 0.3s ease 0s 1 forwards; } .mouse-move.out-top .grid-hover { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: out-top 0.3s ease 0s 1 forwards; animation: out-top 0.3s ease 0s 1 forwards; } .mouse-move.out-right .grid-hover { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation: out-right 0.3s ease 0s 1 forwards; animation: out-right 0.3s ease 0s 1 forwards; margin-left: 1px; } .mouse-move.out-bottom .grid-hover { -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-animation: out-bottom 0.3s ease 0s 1 forwards; animation: out-bottom 0.3s ease 0s 1 forwards; } .mouse-move.out-left .grid-hover { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-animation: out-left 0.3s ease 0s 1 forwards; animation: out-left 0.3s ease 0s 1 forwards; } @keyframes in-top { from { transform: rotate3d(-1, 0, 0, 90deg); } to { transform: rotate3d(0, 0, 0, 0deg); } } @keyframes in-right { from { transform: rotate3d(0, -1, 0, 90deg); } to { transform: rotate3d(0, 0, 0, 0deg); } } @keyframes in-bottom { from { transform: rotate3d(1, 0, 0, 90deg); } to { transform: rotate3d(0, 0, 0, 0deg); } } @keyframes in-left { from { transform: rotate3d(0, 1, 0, 90deg); } to { transform: rotate3d(0, 0, 0, 0deg); } } @keyframes out-top { from { transform: rotate3d(0, 0, 0, 0deg); } to { transform: rotate3d(-1, 0, 0, 104deg); } } @keyframes out-right { from { transform: rotate3d(0, 0, 0, 0deg); } to { transform: rotate3d(0, -1, 0, 104deg); } } @keyframes out-bottom { from { transform: rotate3d(0, 0, 0, 0deg); } to { transform: rotate3d(1, 0, 0, 104deg); } } @keyframes out-left { from { transform: rotate3d(0, 0, 0, 0deg); } to { transform: rotate3d(0, 1, 0, 104deg); } } .grid-hover h3{ color: #fff; position: relative; font-size: 1.5rem; position: relative; margin: 6rem 0 0.25rem; text-align: center;} @media (min-width: 992px) and (max-width: 1199px) { .grid-hover h3 { font-size: 1.3125rem; } } @media (min-width: 768px) and (max-width: 991px) { .grid-hover h3 { font-size: 1.25rem; margin: -2.5rem 0 0.25rem; } } .grid-hover span { font-weight: 500; position: relative; display: block; padding-bottom: 20px; color: #fff; text-align: center; } .grid-hover-link{display: -webkit-box; display: -ms-flexbox; display: flex; } .fa{color: #fff;}
(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'); } }); } if ($(window).width() < 992) { $('.dropdown-menu a.dropdown-toggle').on('click', function(e) { if (!$(this).next().hasClass('show')) { $(this).parents('.dropdown-menu').first().find('.show').removeClass("show"); } var $subMenu = $(this).next(".dropdown-menu"); $subMenu.toggleClass('show'); $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) { $('.dropdown-submenu .show').removeClass("show"); }); return false; }); } /*-------------------------- Intro Title Text Effect ---------------------------- */ var str = 'SEO OPTIMIZATION'; var spans = '<span>' + str.split('').join('</span><span>') + '</span>'; $(spans).hide().appendTo('.intro-title').each(function (i) { $(this).delay(100 * i).css({ display: 'inline', opacity: 0 }).animate({ opacity: 1 }, 300); }); /*-------------------------- Services Area ---------------------------- */ $('.service-single').on('mouseenter', function() { $('.service-single.active').removeClass('active'); $(this).addClass('active'); }); /*-------------------------- ScrollUp ---------------------------- */ if(('#scrollUp').length) { $.scrollUp( { scrollText: '<i class="fas fa-angle-up"></i>', easingType: 'linear', scrollSpeed: 900, animation: 'fade' }); } /*-------------------------- Mouse Move ---------------------------- */ var nodes = [].slice.call(document.querySelectorAll('.mouse-move'), 0); var directions = { 0: 'top', 1: 'right', 2: 'bottom', 3: 'left' }; var classNames = ['in', 'out'].map((p) => Object.values(directions).map((d) => `${p}-${d}`)).reduce((a, b) => a.concat(b)); var getDirectionKey = (ev, node) => { var { width, height, top, left } = node.getBoundingClientRect(); var l = ev.pageX - (left + window.pageXOffset); var t = ev.pageY - (top + window.pageYOffset); var x = (l - (width/2) * (width > height ? (height/width) : 1)); var y = (t - (height/2) * (height > width ? (width/height) : 1)); return Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4; } class Item { constructor(element) { this.element = element; this.element.addEventListener('mouseover', (ev) => this.update(ev, 'in')); this.element.addEventListener('mouseout', (ev) => this.update(ev, 'out')); } update(ev, prefix) { this.element.classList.remove(...classNames); this.element.classList.add(`${prefix}-${directions[getDirectionKey(ev, this.element)]}`); } } nodes.forEach(node => new Item(node)); /*---------------------------- Venobox Popup ------------------------------ */ $('.venobox').venobox( { border: '3px', titleattr: 'data-title', numeratio: true, infinigall: true }); /*--------------------- Counter ---------------------*/ var timer = $('.timer'); if(timer.length) { timer.appear(function () { timer.countTo(); }) } /*--------------------- Clients carousel ---------------------*/ var BlogSlider=$('.blog-slider'); BlogSlider.owlCarousel( { items: 3, loop:true, nav:true, margin: 30, dots:false, autoplay:false, navText: ["<i class='fas fa-arrow-left'></i>", "<i class='fas fa-arrow-right'></i>"], responsive: { 0: { items: 1, autoplay:true, } , 768: { items: 2 } , 992: { items: 2 } , 1200: { items: 3 } } }); $('.blog-slider .owl-nav').removeClass('disabled'); $('.blog-slider .owl-nav').on('click', function(event) { $(this).removeClass('disabled'); }); /*--------------------- Blog carousel ---------------------*/ var Blog=$('.single-news-slider'); Blog.owlCarousel( { items: 1, loop:true, nav:true, margin: 0, dots:false, autoplay:true, navText: ["<i class='fas fa-arrow-left'></i>", "<i class='fas fa-arrow-right'></i>"] }); $('.single-news-slider .owl-nav').removeClass('disabled'); $('.single-news-slider .owl-nav').on('click', function(event) { $(this).removeClass('disabled'); }); /*--------------------- Blog carousel ---------------------*/ var ClientLogo=$('.client-logo-slider'); ClientLogo.owlCarousel( { items: 4, loop:true, nav:true, margin: 100, dots:false, autoplay:true, responsive: { 0: { items: 1, margin: 0 } , 768: { items: 2 } , 992: { items: 3 } , 1200: { items: 4 } } }); /*--------------------- LoadMore Projects ---------------------*/ if(('.project-one .grid').length) { jQuery('.project-one .grid').loadMoreResults({ tag: { name: 'div', 'class': 'col-md-3' }, button: { 'class': 'btn', text: 'Load More Project' }, displayedItems: 8, showItems: 1 }); } /*--------------------- Video ---------------------*/ $(".cd-popup-trigger").on("click", function(p) { p.preventDefault(), $(".cd-popup").addClass("is-visible") }), $(".cd-popup").on("click", function(p) { ($(p.target).is(".cd-popup-close") || $(p.target).is(".cd-popup")) && (p.preventDefault(), $(this).removeClass("is-visible")) }); /*--------------------- WOW ---------------------*/ if ($('.wow').length) { var wow = new WOW({ mobile: false }); wow.init(); }; /*--------------------- icheck ---------------------*/ var inputCheckBox = $('.form-check'); if (inputCheckBox.length) { inputCheckBox.iCheck({ checkboxClass: 'icheckbox_minimal-blue', radioClass: 'iradio_minimal-blue' }); } /*--------------------- Mail Ajax ---------------------*/ if($('.contact-form').length) { var form = $('#ajax-contact'); var formMessages = $('.form-messages'); $(form).submit(function(e) { e.preventDefault(); var formData = $(form).serialize(); $.ajax({ type: 'POST', url: $(form).attr('action'), data: formData }).done(function(response) { $(formMessages).removeClass('error'); $(formMessages).addClass('success'); $(formMessages).text(response); $(this).find("input").val(""); $(form).trigger("reset"); }).fail(function(data) { $(formMessages).removeClass('success'); $(formMessages).addClass('error'); if (data.responseText !== '') { $(formMessages).text(data.responseText); } else { $(formMessages).text('Oops! An error occured and your message couldn\'t be sent.'); } }); }); } })(jQuery);

Related: See More


Questions / Comments: