"On Hover Change Image Banner slider"
Bootstrap 4.1.1 Snippet by shubhamsavner

<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 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://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script> <div class="section-sliderr"> <ul class="case-study-wrapper"> <li class="case-study-name"> <a href="#" class="hover-target"> Health</a> </li> <li class="case-study-name"> <a href="#" class="hover-target">Office</a> </li> <li class="case-study-name"> <a href="#" class="hover-target">Class Room</a> </li> <li class="case-study-name"> <a href="#" class="hover-target">Living Room</a> </li> </ul> <ul class="case-study-images"> <li> <div class="img-hero-background"></div> <div class="dark-over-hero"></div> <div class="hero-number-back">01</div> <div class="hero-number">01</div> <div class="hero-number-fixed">04</div> <!--<div class="case-study-title">graphic design, interaction</div> --> </li> <li> <div class="img-hero-background"></div> <div class="hero-number-back">02</div> <div class="hero-number">02</div> <!--<div class="case-study-title">graphic design, interaction</div> --> </li> <li> <div class="img-hero-background"></div> <div class="hero-number-back">03</div> <div class="hero-number">03</div> <!--<div class="case-study-title">graphic design, interaction</div> --> </li> <li> <div class="img-hero-background"></div> <div class="hero-number-back">04</div> <div class="hero-number">04</div> <!--<div class="case-study-title">graphic design, interaction</div> --> </li> </ul> </div> <div class='cursor' id="cursor"></div> <div class='cursor2' id="cursor2"></div> <div class='cursor3' id="cursor3"></div>
/* SLIDER MAIN HOVER EFFCTE SLIDER By Nav*/ /* #Cursor ================================================== */ .cursor, .cursor2, .cursor3{ position: fixed; border-radius: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none; left: -100px; top: 50% } .cursor{ background-color: #fff; height: 0; width: 0; z-index: 99999; } .cursor2,.cursor3{ height: 36px; width: 36px; z-index:99998; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out } .cursor2.hover, .cursor3.hover{ -webkit-transform:scale(2) translateX(-25%) translateY(-25%); transform:scale(2) translateX(-25%) translateY(-25%); border:none } .cursor2{ border: 2px solid #fff; box-shadow: 0 0 22px rgba(255, 255, 255, 0.6); } .cursor2.hover{ background: rgba(255,255,255,.1); box-shadow: 0 0 12px rgba(255, 255, 255, 0.2); } /* #Slider ================================================== */ .section-sliderr{ position: relative; width: 100%; display: block; overflow: hidden; height: 85vh; background-color: #212121; } /* Case Study Showcase ================================================== */ .case-study-wrapper { position: absolute; bottom: 0; left: 0; z-index: 10; width: auto; margin: 0; padding: 0; list-style: none; } .case-study-wrapper .case-study-name a { position: relative; list-style: none; margin: 0; display: block; text-align: left; padding: 0; font-size: 28px; margin-top: 10px; margin-bottom: 10px; font-family: maharlika; font-weight: 500; line-height: 1.3; letter-spacing: 2px; color: #000000; opacity: 1; text-decoration: none; -webkit-transition: all 300ms linear; transition: all 300ms linear; background: #f7efa7fc; padding: 8px 15px; margin-lefT: 15px; } .case-study-wrapper .case-study-name a:hover { text-decoration: none; } .case-study-wrapper .case-study-name.active a { opacity: 1; color: #fff; } .case-study-images { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin:0; z-index:2; } .case-study-images li { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; list-style:none; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .case-study-images li .img-hero-background{ position: absolute; width: 100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; background-position:center center; background-repeat:no-repeat; top: 0; left: 0; overflow: hidden; list-style:none; opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition: all 300ms linear; transition: all 300ms linear; } .case-study-images li.show .img-hero-background { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .case-study-images li .case-study-title{ position: absolute; bottom: 30px; left: 30px; display: block; opacity: 0; color: #fff; z-index: 19; letter-spacing: 1px; font-size: 14px; font-family: 'Roboto', sans-serif; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; font-weight: 400; line-height: 16px; color: #fff; font-style: italic; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 300ms linear; transition: all 300ms linear; } .case-study-images li.show .case-study-title { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .case-study-images li .hero-number-back{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: block; list-style:none; opacity: 0; font-size: 18vw; font-family: 'Poppins', sans-serif; font-weight: 900; line-height: 1; color: rgba(255,255,255,.12); z-index: 1; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .case-study-images li .hero-number{ position: absolute; bottom: 40px; left: 50%; width: 40px; margin-left: -70px; display: block; letter-spacing: 2px; text-align: center; list-style:none; opacity: 0; font-size: 13px; font-family: 'Poppins', sans-serif; font-weight: 300; line-height: 1; color: #fff; z-index: 6; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: all 300ms linear; transition: all 300ms linear; } .case-study-images li .hero-number-fixed{ position: absolute; bottom: 40px; left: 50%; margin-left: 30px; width: 40px; text-align: center; display: block; letter-spacing: 2px; list-style:none; font-size: 13px; font-family: 'Poppins', sans-serif; font-weight: 300; line-height: 1; color: #fff; z-index: 6; } .case-study-images li .hero-number-fixed:before{ position: absolute; content: ''; top: 50%; left: -60px; width: 60px; height: 1px; z-index: 1; background-color: rgba(255,255,255,.4); } .case-study-images li.show .hero-number { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .case-study-images li.show .hero-number-back { opacity: 1; } .dark-over-hero{ position:absolute; width:100%; height:100%; top:0; left:0; z-index:5; background-color: #050505; opacity: 0.2; } .case-study-images li:nth-child(1) .img-hero-background{ background-image: url("https://i.ibb.co/Zckyjbd/home-1-slider-1-bg.jpg"); } .case-study-images li:nth-child(2) .img-hero-background{ background-image: url("https://i.ibb.co/FgYc5hr/home-1-slider-3-bg.jpg"); } .case-study-images li:nth-child(3) .img-hero-background{ background-image: url("https://i.ibb.co/BrBF9LP/unnamed.jpg"); } .case-study-images li:nth-child(4) .img-hero-background{ background-image: url("../../assets/image/nutrition.jpg"); } /* #Media ================================================== */ @media (max-width: 991px) { .case-study-images li .hero-number-back{ font-size: 26vw; } } @media (max-width: 767px) { .case-study-wrapper .case-study-name a { font-size: 20px; letter-spacing: 1px; } .case-study-images li .hero-number-back{ font-size: 32vw; } }
(function($) { "use strict"; //Page cursors document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) { t.style.left = n.clientX + "px", t.style.top = n.clientY + "px", e.style.left = n.clientX + "px", e.style.top = n.clientY + "px", i.style.left = n.clientX + "px", i.style.top = n.clientY + "px" }); var t = document.getElementById("cursor"), e = document.getElementById("cursor2"), i = document.getElementById("cursor3"); function n(t) { e.classList.add("hover"), i.classList.add("hover") } function s(t) { e.classList.remove("hover"), i.classList.remove("hover") } s(); for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) { o(r[a]) } function o(t) { t.addEventListener("mouseover", n), t.addEventListener("mouseout", s) } $(document).ready(function() { /* Hero Case study images */ $('.case-study-name:nth-child(1)').on('mouseenter', function() { $('.case-study-name.active').removeClass('active'); $('.case-study-images li.show').removeClass("show"); $('.case-study-images li:nth-child(1)').addClass("show"); $('.case-study-name:nth-child(1)').addClass('active'); }) $('.case-study-name:nth-child(2)').on('mouseenter', function() { $('.case-study-name.active').removeClass('active'); $('.case-study-images li.show').removeClass("show"); $('.case-study-images li:nth-child(2)').addClass("show"); $('.case-study-name:nth-child(2)').addClass('active'); }) $('.case-study-name:nth-child(3)').on('mouseenter', function() { $('.case-study-name.active').removeClass('active'); $('.case-study-images li.show').removeClass("show"); $('.case-study-images li:nth-child(3)').addClass("show"); $('.case-study-name:nth-child(3)').addClass('active'); }) $('.case-study-name:nth-child(4)').on('mouseenter', function() { $('.case-study-name.active').removeClass('active'); $('.case-study-images li.show').removeClass("show"); $('.case-study-images li:nth-child(4)').addClass("show"); $('.case-study-name:nth-child(4)').addClass('active'); }) $('.case-study-name:nth-child(1)').trigger('mouseenter') }); })(jQuery);

Related: See More


Questions / Comments: