<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);
