{"id":1243,"date":"2023-04-10T20:19:19","date_gmt":"2023-04-10T17:19:19","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1243"},"modified":"2023-04-10T20:19:22","modified_gmt":"2023-04-10T17:19:22","slug":"hover-slider","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/1243\/","title":{"rendered":"Hover slider"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Hover slider\" width=\"640\" height=\"480\" src=\"https:\/\/www.youtube.com\/embed\/_zmns9drfj4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">  &lt;div class=&quot;switch-wrap&quot;&gt;\n    &lt;div id=&quot;switch&quot; class=&quot;hover-target&quot;&gt;\n      &lt;div id=&quot;circle&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  \n  &lt;!-- Page cursor\n  ================================================== --&gt;\n  \n      &lt;div class='cursor' id=&quot;cursor&quot;&gt;&lt;\/div&gt;\n      &lt;div class='cursor2' id=&quot;cursor2&quot;&gt;&lt;\/div&gt;\n      &lt;div class='cursor3' id=&quot;cursor3&quot;&gt;&lt;\/div&gt; \n\n  &lt;div class=&quot;section&quot;&gt;\n    &lt;ul class=&quot;case-study-wrapper&quot;&gt;\n      &lt;li class=&quot;case-study-name&quot;&gt;                            \t\n        &lt;a href=&quot;#&quot; class=&quot;hover-target&quot;&gt;nature&lt;\/a&gt;\n      &lt;\/li&gt;\n      &lt;li class=&quot;case-study-name&quot;&gt;                                         \t\n        &lt;a href=&quot;#&quot; class=&quot;hover-target&quot;&gt;travel&lt;\/a&gt;\n      &lt;\/li&gt;\n      &lt;li class=&quot;case-study-name&quot;&gt;                                        \t\n        &lt;a href=&quot;#&quot; class=&quot;hover-target&quot;&gt;fashion&lt;\/a&gt;\n      &lt;\/li&gt;\n      &lt;li class=&quot;case-study-name&quot;&gt;                                         \t\n        &lt;a href=&quot;#&quot; class=&quot;hover-target&quot;&gt;culture&lt;\/a&gt;\n      &lt;\/li&gt;\n    &lt;\/ul&gt;\n    &lt;ul class=&quot;case-study-images&quot;&gt;\n      &lt;li&gt;\n        &lt;div class=&quot;img-hero-background&quot;&gt;\n          &lt;span&gt;\n            &lt;img src=&quot;https:\/\/ivang-design.com\/svg-load\/slider\/1.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;\/span&gt; \n          &lt;span&gt;\n            &lt;img src=&quot;https:\/\/ivang-design.com\/svg-load\/slider\/2.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;\/span&gt; \n          &lt;span&gt;\n            &lt;img src=&quot;https:\/\/ivang-design.com\/svg-load\/slider\/3.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;\/span&gt; \n          &lt;span&gt;\n            &lt;img src=&quot;https:\/\/ivang-design.com\/svg-load\/slider\/4.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;\/span&gt; \n        &lt;\/div&gt; \n        &lt;div class=&quot;hero-number-back&quot;&gt;01&lt;\/div&gt; \n        &lt;div class=&quot;hero-number&quot;&gt;01&lt;\/div&gt; \n        &lt;div class=&quot;hero-number-fixed&quot;&gt;04&lt;\/div&gt; \n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;div class=&quot;img-hero-background&quot;&gt;\n          &lt;span&gt;\n            &lt;img src=&quot;https:\/\/ivang-design.com\/svg-load\/slider\/5.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;\/span&gt; \n          &lt;span&gt;\n            &lt;img src=&quot;https:\/\/ivang-design.com\/svg-load\/slider\/6.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;\/span&gt; \n          &lt;span&gt;\n            &lt;img src=&quot;https:\/\/ivang-design.com\/svg-load\/slider\/7.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;\/span&gt; \n          &lt;span&gt;\n            &lt;img src=&quot;https:\/\/ivang-design.com\/svg-load\/slider\/8.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;\/span&gt; \n        &lt;\/div&gt; \n        &lt;div class=&quot;hero-number-back&quot;&gt;02&lt;\/div&gt; \n        &lt;div class=&quot;hero-number&quot;&gt;02&lt;\/div&gt;  \n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;div class=&quot;img-hero-background&quot;&gt;\n          &lt;span&gt;\n            &lt;img src=&quot;https:\/\/ivang-design.com\/svg-load\/slider\/9.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;\/span&gt; \n          &lt;span&gt;\n            &lt;img src=&quot;https:\/\/ivang-design.com\/svg-load\/slider\/10.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;\/span&gt; \n          &lt;span&gt;\n            &lt;img src=&quot;https:\/\/ivang-design.com\/svg-load\/slider\/11.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;\/span&gt; \n          &lt;span&gt;\n            &lt;img src=&quot;https:\/\/ivang-design.com\/svg-load\/slider\/12.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;\/span&gt; \n        &lt;\/div&gt;\n        &lt;div class=&quot;hero-number-back&quot;&gt;03&lt;\/div&gt;  \n        &lt;div class=&quot;hero-number&quot;&gt;03&lt;\/div&gt; \n      &lt;\/li&gt;\n      &lt;li&gt;\n        &lt;div class=&quot;img-hero-background&quot;&gt;\n          &lt;span&gt;\n            &lt;img src=&quot;https:\/\/ivang-design.com\/svg-load\/slider\/13.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;\/span&gt; \n          &lt;span&gt;\n            &lt;img src=&quot;https:\/\/ivang-design.com\/svg-load\/slider\/14.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;\/span&gt; \n          &lt;span&gt;\n            &lt;img src=&quot;https:\/\/ivang-design.com\/svg-load\/slider\/15.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;\/span&gt; \n          &lt;span&gt;\n            &lt;img src=&quot;https:\/\/ivang-design.com\/svg-load\/slider\/16.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;\/span&gt; \n        &lt;\/div&gt; \n        &lt;div class=&quot;hero-number-back&quot;&gt;04&lt;\/div&gt; \n        &lt;div class=&quot;hero-number&quot;&gt;04&lt;\/div&gt; \n      &lt;\/li&gt;\n    &lt;\/ul&gt;\t\n  &lt;\/div&gt;\n \n\n\n\n\n\n\n  &lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.3.1\/jquery.min.js&quot;&gt;&lt;\/script&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">\n\n\/* Please \u2764 this if you like it! *\/\n\n\n\/* ======================================== * \n\t\t        BEST VIEWED FULLSCREEN\n   https:\/\/codepen.io\/ig_design\/full\/gqRJNW\n * ======================================== *\/\n\n @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&amp;subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin-ext,vietnamese');\n\n body{\n\t width: 100%;\n\t height: 100vh;\n\t background: #1f2029;\n\t overflow: hidden;\n }\n \n \/* #Cursor\n ================================================== *\/\n .cursor,\n .cursor2,\n .cursor3{\n\t position: fixed;\n\t border-radius: 50%;\t\n\t transform: translateX(-50%) translateY(-50%);\n\t pointer-events: none;\n\t left: -100px;\n\t top: 50%;\n\t mix-blend-mode: difference;\n }\n .cursor{\n\t background-color: #fff;\n\t height: 0;\n\t width: 0;\n\t z-index: 99999;\n }\n .cursor2,.cursor3{\n\t height: 36px;\n\t width: 36px;\n\t z-index:99998;\n\t -webkit-transition:all 0.3s ease-out;\n\t transition:all 0.3s ease-out\n }\n .cursor2.hover,\n .cursor3.hover{\n\t -webkit-transform:scale(2) translateX(-25%) translateY(-25%);\n\t transform:scale(2) translateX(-25%) translateY(-25%);\n\t border:none\n }\n .cursor2{\n\t border: 2px solid #fff;\n\t box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);\n }\n .cursor2.hover{\n\t background: rgba(255,255,255,1);\n\t box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);\n }\n \n \/* #Slider\n ================================================== *\/\n \n .section{\n\t position: relative;\n\t width: 100%;\n\t display: block;\n\t overflow: hidden;\n\t height: 100vh;\n }\n \n \/* Case Study Showcase\n ================================================== *\/\n \n .case-study-wrapper {\n\t position: absolute;\n\t top: 50%;\n\t left: 50%;\n\t z-index: 10;\n\t width: auto;\n\t margin: 0;\n\t padding: 0;\n\t -webkit-transform: translate(-50%, -50%);\n\t transform: translate(-50%, -50%);\n\t list-style: none;\n }\n .case-study-wrapper .case-study-name {\n\t margin: 0 auto;\n\t text-align: center;\n }\n .case-study-wrapper .case-study-name a {\n\t position: relative;\n\t list-style: none;\n\t margin: 0 auto;\n\t display: inline-block;\n\t text-align: center;\n\t padding: 0;\n\t margin-top: 10px;\n\t margin-bottom: 10px;\n\t font-family: 'Poppins', sans-serif;\n\t font-size: 8vh;\n\t font-weight: 800;\n\t line-height: 1.15;\n\t letter-spacing: 3px;\n\t color: #4a4a52;\n\t text-decoration: none;\n\t -webkit-transition: all 300ms linear;\n\t transition: all 300ms linear; \n\t text-decoration: none;\n }\t\n .case-study-wrapper .case-study-name a:hover {\n\t text-decoration: none;\n }\t\n .case-study-wrapper .case-study-name.active a {\n\t color: #fff;\n }\n .case-study-wrapper .case-study-name a:before {\n\t position: absolute;\n\t content: '';\n\t left: 50%;\n\t bottom: 0;\n\t height: 6px;\n\t width: 0;\n\t transform: translateX(-50%);\n\t background: linear-gradient(45deg, #f19872, #e86c9a);\n\t -webkit-transition: all 200ms linear;\n\t transition: all 200ms linear; \n }\t\n .case-study-wrapper .case-study-name:nth-child(2) a:before {\n\t background: linear-gradient(45deg, #0947db, #07d89d);\n }\n .case-study-wrapper .case-study-name:nth-child(3) a:before {\n\t background: linear-gradient(45deg, #ee2d29, #f8ae2c);\n }\n .case-study-wrapper .case-study-name:nth-child(4) a:before {\n\t background: linear-gradient(45deg, #3a3d98, #6f22b9);\n }\n .case-study-wrapper .case-study-name.active a:before {\n\t width: 100%;\n }\n .case-study-images {\n\t position: absolute;\n\t top: 0;\n\t left: 0;\n\t width: 100%;\n\t height: 100%;\n\t margin:0;\n\t z-index:2;\n }\t\n .case-study-images li {\n\t position: absolute;\n\t width: 100%;\n\t height: 100%;\n\t top: 0;\n\t left: 0;\n\t overflow: hidden;\n\t list-style:none;\n\t -webkit-transition: all 300ms linear;\n\t transition: all 300ms linear; \n }\t\n .case-study-images li .img-hero-background{\n\t position: absolute;\n\t width: 100%;\n\t height: 100%;\n\t top: 0;\n\t left: 0;\n\t overflow: hidden;\n\t list-style:none;\n\t opacity: 0;\n\t -webkit-transform: translateY(60px);\n\t transform: translateY(60px);\n\t -webkit-transition: all 300ms linear;\n\t transition: all 300ms linear; \n }\n .case-study-images li.show .img-hero-background {\n\t opacity: 1;\n\t -webkit-transform: translateY(0);\n\t transform: translateY(0);\n } \n .case-study-images li .hero-number-back{\n\t position: absolute;\n\t top: 50%;\n\t left: 50%;\n\t -webkit-transform: translate(-50%, -50%);\n\t transform: translate(-50%, -50%);\n\t display: block;\n\t list-style:none;\n\t opacity: 0;\n\t font-size: 20vw;\n\t font-family: 'Poppins', sans-serif;\n\t font-weight: 900;\n\t line-height: 1;\n\t color: transparent;\n\t -webkit-text-stroke: 4px rgba(0,0,0,.7);\n\t z-index: 1;\n\t -webkit-transition: all 300ms linear;\n\t transition: all 300ms linear; \n } \n .case-study-images li .hero-number{\n\t position: absolute;\n\t bottom: 25px;\n\t left: 50%;\n\t width: 40px;\n\t margin-left: -70px;\n\t display: block;\n\t letter-spacing: 2px;\n\t text-align: center;\n\t list-style:none;\n\t opacity: 0;\n\t font-size: 13px;\n\t font-family: 'Poppins', sans-serif;\n\t font-weight: 300;\n\t line-height: 1;\n\t color: #fff;\n\t z-index: 6;\n\t -webkit-transform: translateY(100%);\n\t transform: translateY(100%);\n\t -webkit-transition: all 300ms linear;\n\t transition: all 300ms linear; \n } \n .case-study-images li .hero-number-fixed{\n\t position: absolute;\n\t bottom: 25px;\n\t left: 50%;\n\t margin-left: 30px;\n\t width: 40px;\n\t text-align: center;\n\t display: block;\n\t letter-spacing: 2px;\n\t list-style:none;\n\t font-size: 13px;\n\t font-family: 'Poppins', sans-serif;\n\t font-weight: 300;\n\t line-height: 1;\n\t color: #fff;\n\t z-index: 6;\n\t -webkit-transition: all 300ms linear;\n\t transition: all 300ms linear; \n }\n .case-study-images li .hero-number-fixed:before{\n\t position: absolute;\n\t content: '';\n\t top: 50%;\n\t left: -60px;\n\t width: 60px;\n\t height: 1px;\n\t z-index: 1;\n\t background-color: rgba(255,255,255,.4);\n\t -webkit-transition: all 300ms linear;\n\t transition: all 300ms linear; \n }\n .case-study-images li.show .hero-number {\n\t opacity: 1;\n\t -webkit-transform: translateY(0);\n\t transform: translateY(0);\n } \n .case-study-images li.show .hero-number-back {\n\t opacity: 1;\n } \n .case-study-images li .img-hero-background span img{\n\t width: 100%;\n\t height: auto;\n\t display: block;\n\t transform: scale(0.6, 1.7);\n\t transform-origin: center top;\n\t -webkit-transition: all 300ms ease;\n\t transition: all 300ms ease; \n }\n .case-study-images li.show .img-hero-background span img{\n\t transform: scale(1);\n }\n .case-study-images li:nth-child(1) .img-hero-background span{\n\t position: absolute;\n\t width: 15%;\n\t top: 12%;\n\t left: 25%;\n\t display: block;\n }\n .case-study-images li:nth-child(1) .img-hero-background span:nth-child(2){\n\t width: 18%;\n\t top: 22%;\n\t left: 55%;\n }\n .case-study-images li:nth-child(1) .img-hero-background span:nth-child(3){\n\t width: 13%;\n\t top: 55%;\n\t left: 75%;\n }\n .case-study-images li:nth-child(1) .img-hero-background span:nth-child(4){\n\t width: 11%;\n\t top: 44%;\n\t left: 15%;\n }\n .case-study-images li:nth-child(2) .img-hero-background span{\n\t position: absolute;\n\t width: 13%;\n\t top: 7%;\n\t left: 15%;\n\t display: block;\n }\n .case-study-images li:nth-child(2) .img-hero-background span:nth-child(2){\n\t width: 14%;\n\t top: 55%;\n\t left: 29%;\n }\n .case-study-images li:nth-child(2) .img-hero-background span:nth-child(3){\n\t width: 11%;\n\t top: 17%;\n\t left: 72%;\n }\n .case-study-images li:nth-child(2) .img-hero-background span:nth-child(4){\n\t width: 13%;\n\t top: 54%;\n\t left: 67%;\n }\n .case-study-images li:nth-child(3) .img-hero-background span{\n\t position: absolute;\n\t width: 11%;\n\t top: 9%;\n\t left: 18%;\n\t display: block;\n }\n .case-study-images li:nth-child(3) .img-hero-background span:nth-child(2){\n\t width: 11%;\n\t top: 55%;\n\t left: 29%;\n }\n .case-study-images li:nth-child(3) .img-hero-background span:nth-child(3){\n\t width: 12%;\n\t top: 11%;\n\t left: 62%;\n }\n .case-study-images li:nth-child(3) .img-hero-background span:nth-child(4){\n\t width: 9%;\n\t top: 54%;\n\t left: 75%;\n }\n .case-study-images li:nth-child(4) .img-hero-background span{\n\t position: absolute;\n\t width: 15%;\n\t top: 12%;\n\t left: 25%;\n\t display: block;\n }\n .case-study-images li:nth-child(4) .img-hero-background span:nth-child(2){\n\t width: 12%;\n\t top: 22%;\n\t left: 55%;\n }\n .case-study-images li:nth-child(4) .img-hero-background span:nth-child(3){\n\t width: 13%;\n\t top: 58%;\n\t left: 75%;\n }\n .case-study-images li:nth-child(4) .img-hero-background span:nth-child(4){\n\t width: 11%;\n\t top: 59%;\n\t left: 20%;\n }\n \n \/* #Media\n ================================================== *\/\n \n @media (max-width: 991px) { \n\t .case-study-images li .hero-number-back{\n\t\t font-size: 26vw;\n\t } \n }\n \n @media (max-width: 767px) {\t\n\t .case-study-wrapper .case-study-name a {\n\t\t font-size: 26px;\n\t\t letter-spacing: 1px;\n\t }\n\t .case-study-images li .hero-number-back{\n\t\t font-size: 32vw;\n\t } \n }\n \n @media (max-width: 580px) {\t\n\t .case-study-images li:nth-child(1) .img-hero-background span,\n\t .case-study-images li:nth-child(2) .img-hero-background span,\n\t .case-study-images li:nth-child(3) .img-hero-background span,\n\t .case-study-images li:nth-child(4) .img-hero-background span{\n\t\t width: calc(100% - 40px);\n\t\t top: 50%;\n\t\t left: 20px;\n\t\t transform: translateY(-50%);\n\t }\n\t .case-study-images li:nth-child(1) .img-hero-background span:nth-child(2),\n\t .case-study-images li:nth-child(1) .img-hero-background span:nth-child(3),\n\t .case-study-images li:nth-child(1) .img-hero-background span:nth-child(4),\n\t .case-study-images li:nth-child(2) .img-hero-background span:nth-child(2),\n\t .case-study-images li:nth-child(2) .img-hero-background span:nth-child(3),\n\t .case-study-images li:nth-child(2) .img-hero-background span:nth-child(4),\n\t .case-study-images li:nth-child(3) .img-hero-background span:nth-child(2),\n\t .case-study-images li:nth-child(3) .img-hero-background span:nth-child(3),\n\t .case-study-images li:nth-child(3) .img-hero-background span:nth-child(4),\n\t .case-study-images li:nth-child(4) .img-hero-background span:nth-child(2),\n\t .case-study-images li:nth-child(4) .img-hero-background span:nth-child(3),\n\t .case-study-images li:nth-child(4) .img-hero-background span:nth-child(4){\n\t\t display: none;\n\t }\n }\n .switch-wrap {\n\t position: fixed;\n\t bottom: 30px;\n\t right: 30px;\n\t z-index: 1000;\n\t -webkit-transition: all 300ms linear;\n\t transition: all 300ms linear; \n }\n #switch,\n #circle {\n\t cursor: pointer;\n\t -webkit-transition: all 300ms linear;\n\t transition: all 300ms linear; \n } \n #switch {\n\t width: 70px;\n\t height: 8px;\n\t margin: 0 auto;\n\t text-align: center;\n\t border: 2px solid #000;\n\t border-radius: 27px;\n\t background: #8167a9;\n\t position: relative;\n\t display: inline-block;\n }\n #circle {\n\t position: absolute;\n\t top: -11px;\n\t left: 0;\n\t width: 26px;\n\t height: 26px;\n\t border-radius: 50%;\n\t box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);\n\t background: #fff;\n }\n .switched {\n\t border-color: #8167a9 !important;\n\t background: #000 !important;\n }\n .switched #circle {\n\t left: 44px;\n\t background: #000;\n }\n \n \n body.light{\n\t background: #f2f5f5;\n }\n body.light .cursor{\n\t mix-blend-mode: normal;\n }\n body.light .cursor2{\n\t border: 2px solid #000;\n\t box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);\n\t mix-blend-mode: normal;\n }\n body.light .cursor2.hover{\n\t background: rgba(0,0,0,.15);\n\t box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);\n\t border-color: transparent;\n\t mix-blend-mode: normal;\n }\n body.light .case-study-images li .hero-number-back{\n\t -webkit-text-stroke: 4px #ccc;\n } \n body.light .case-study-images li .hero-number{\n\t color: #212121;\n } \n body.light .case-study-images li .hero-number-fixed{\n\t color: #212121;\n }\n body.light .case-study-images li .hero-number-fixed:before{\n\t background-color: rgba(0,0,0,.4);\n }\n body.light .case-study-wrapper .case-study-name a {\n\t color: #777777;\n }\t\n body.light .case-study-wrapper .case-study-name.active a {\n\t color: #000;\n }\n \/* #Link to page\n ================================================== *\/\n \n .link-to-portfolio {\n\t position: fixed;\n\t top: 30px;\n\t right: 30px;\n\t z-index: 100;\n\t cursor: pointer;\n\t width: 40px;\n\t height: 40px;\n\t text-align: center;\n\t border-radius: 3px;\n\t background-position: center center;\n\t background-size: cover;\n\t background-image: url('https:\/\/ivang-design.com\/ig-logo.jpg');\n\t box-shadow: 0 0 0 2px rgba(255,255,255,.3);\n\t transition: opacity .2s, border-radius .2s, box-shadow .2s;\n\t transition-timing-function: ease-out;\n }\n .link-to-portfolio:hover {\n\t opacity: 0.8;\n\t border-radius: 50%;\n\t box-shadow: 0 0 0 2px rgba(255,255,255,0);\n }<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">(function($) { &quot;use strict&quot;;\n\t\t\n\t\/\/Page cursors\n\n    document.getElementsByTagName(&quot;body&quot;)[0].addEventListener(&quot;mousemove&quot;, function(n) {\n        t.style.left = n.clientX + &quot;px&quot;, \n\t\tt.style.top = n.clientY + &quot;px&quot;, \n\t\te.style.left = n.clientX + &quot;px&quot;, \n\t\te.style.top = n.clientY + &quot;px&quot;, \n\t\ti.style.left = n.clientX + &quot;px&quot;, \n\t\ti.style.top = n.clientY + &quot;px&quot;\n    });\n    var t = document.getElementById(&quot;cursor&quot;),\n        e = document.getElementById(&quot;cursor2&quot;),\n        i = document.getElementById(&quot;cursor3&quot;);\n    function n(t) {\n        e.classList.add(&quot;hover&quot;), i.classList.add(&quot;hover&quot;)\n    }\n    function s(t) {\n        e.classList.remove(&quot;hover&quot;), i.classList.remove(&quot;hover&quot;)\n    }\n    s();\n    for (var r = document.querySelectorAll(&quot;.hover-target&quot;), a = r.length - 1; a &gt;= 0; a--) {\n        o(r[a])\n    }\n    function o(t) {\n        t.addEventListener(&quot;mouseover&quot;, n), t.addEventListener(&quot;mouseout&quot;, s)\n    }\n\t\n\t$(document).ready(function() {\n\t\t\n\t\t\/* Hero Case study images *\/\t\t\t\n\t\t\n\t\t$('.case-study-name:nth-child(1)').on('mouseenter', function() {\n\t\t\t$('.case-study-name.active').removeClass('active');\n\t\t\t$('.case-study-images li.show').removeClass(&quot;show&quot;);\n\t\t\t$('.case-study-images li:nth-child(1)').addClass(&quot;show&quot;);\n\t\t\t$('.case-study-name:nth-child(1)').addClass('active');\n\t\t})\n\t\t$('.case-study-name:nth-child(2)').on('mouseenter', function() {\n\t\t\t$('.case-study-name.active').removeClass('active');\n\t\t\t$('.case-study-images li.show').removeClass(&quot;show&quot;);\n\t\t\t$('.case-study-images li:nth-child(2)').addClass(&quot;show&quot;);\n\t\t\t$('.case-study-name:nth-child(2)').addClass('active');\n\t\t})\n\t\t$('.case-study-name:nth-child(3)').on('mouseenter', function() {\n\t\t\t$('.case-study-name.active').removeClass('active');\n\t\t\t$('.case-study-images li.show').removeClass(&quot;show&quot;);\n\t\t\t$('.case-study-images li:nth-child(3)').addClass(&quot;show&quot;);\n\t\t\t$('.case-study-name:nth-child(3)').addClass('active');\n\t\t})\n\t\t$('.case-study-name:nth-child(4)').on('mouseenter', function() {\n\t\t\t$('.case-study-name.active').removeClass('active');\n\t\t\t$('.case-study-images li.show').removeClass(&quot;show&quot;);\n\t\t\t$('.case-study-images li:nth-child(4)').addClass(&quot;show&quot;);\n\t\t\t$('.case-study-name:nth-child(4)').addClass('active');\n\t\t})\n\t\t$('.case-study-name:nth-child(1)').trigger('mouseenter')   \n   });  \n\n\t\n\t\/\/Switch dark\/light\n\t\n\t$(&quot;#switch&quot;).on('click', function () {\n\t\tif ($(&quot;body&quot;).hasClass(&quot;light&quot;)) {\n\t\t\t$(&quot;body&quot;).removeClass(&quot;light&quot;);\n\t\t\t$(&quot;#switch&quot;).removeClass(&quot;switched&quot;);\n\t\t}\n\t\telse {\n\t\t\t$(&quot;body&quot;).addClass(&quot;light&quot;);\n\t\t\t$(&quot;#switch&quot;).addClass(&quot;switched&quot;);\n\t\t}\n\t}); \t\n\t\n  })(jQuery); <\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1244,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[17],"class_list":["post-1243","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-slider","tag-jquery"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1243"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1243\/revisions"}],"predecessor-version":[{"id":1245,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1243\/revisions\/1245"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1244"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}