WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Hover slider
2378
Andev.web
Open In Editor
Video
Publish Your Code
3
Recommended
7 November 2024
Hover...
7 September 2024
League of legends slider gallery
22 August 2024
Animated card with 3d hover effect
HTML
Copy
Andev Web
King
Rapper
Roman warrior
Samurai
01
01
04
02
02
03
03
04
04
CSS
Copy
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin-ext,vietnamese'); body{ width: 100%; height: 100vh; background: #000; overflow: hidden; } .cursor, .cursor2, .cursor3{ position: fixed; border-radius: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none; left: -100px; top: 50% } .cursor{ background-color: #585858; 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); } .section{ position: relative; width: 100%; display: block; overflow: hidden; height: 100vh; background-color: #212121; } .case-study-wrapper { position: absolute; top: 50%; left: 50%; z-index: 10; width: auto; margin: 0; padding: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); list-style: none; } .case-study-wrapper .case-study-name a { position: relative; list-style: none; margin: 0; display: block; text-align: center; padding: 0; font-size: 28px; margin-top: 25px; margin-bottom: 25px; font-family: 'Poppins', sans-serif; font-weight: 500; line-height: 1.3; letter-spacing: 2px; color: #ffffff; opacity: 0.5; text-decoration: none; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .case-study-wrapper .case-study-name a:hover { text-decoration: none; } .case-study-wrapper .case-study-name.active a { opacity: 1; color: #ffffff; } .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-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(0, 0, 0, 0.366); 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://www.ultraimagehub.com/wallpapers/tr:flp-false,gx-0.6,gy-0.5,q-75,rh-3264,rw-5824,th-1080,tw-1920/1273889733512138794.jpeg"); } .case-study-images li:nth-child(2) .img-hero-background{ background-image: url("https://www.ultraimagehub.com/wallpapers/tr:flp-false,gx-0.43,gy-0.2,q-75,rh-3264,rw-5824,th-1080,tw-1920/1273886577881518090.jpeg"); } .case-study-images li:nth-child(3) .img-hero-background{ background-image: url("https://www.ultraimagehub.com/wallpapers/tr:flp-false,gx-0.6,gy-0.2,q-75,rh-3264,rw-5824,th-1080,tw-1920/1273890280768274555.jpeg"); } .case-study-images li:nth-child(4) .img-hero-background{ background-image: url("https://www.ultraimagehub.com/wallpapers/tr:flp-false,gx-0.5,gy-0.5,q-75,rh-3264,rw-5824,th-1080,tw-1920/1273886781967958066.jpeg"); } @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; } }
JS
Copy
(function($) { "use strict"; 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() { $('.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);