CSS3 Fader Case Study - Snippet

--- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart

--- Bootstrap Foundation Animate.css

• Preview
• HTML
• CSS
• JS

<div class="mainwrapper"> <div class="faderwrapper"> <div class="fader"> <div class="scale" data-perc="100"></div> <div class="scale" data-perc="98"></div> <div class="scale" data-perc="96"></div> <div class="scale" data-perc="94"></div> <div class="scale" data-perc="92"></div> <div class="scale" data-perc="90"></div> <div class="scale" data-perc="88"></div> <div class="scale" data-perc="86"></div> <div class="scale" data-perc="84"></div> <div class="scale" data-perc="82"></div> <div class="scale" data-perc="80"></div> <div class="scale" data-perc="78"></div> <div class="scale" data-perc="76"></div> <div class="scale" data-perc="74"></div> <div class="scale" data-perc="72"></div> <div class="scale" data-perc="70"></div> <div class="scale" data-perc="68"></div> <div class="scale" data-perc="66"></div> <div class="scale" data-perc="64"></div> <div class="scale" data-perc="62"></div> <div class="scale" data-perc="60"></div> <div class="scale" data-perc="58"></div> <div class="scale" data-perc="56"></div> <div class="scale" data-perc="54"></div> <div class="scale" data-perc="52"></div> <div class="scale" data-perc="50"></div> <div class="scale" data-perc="48"></div> <div class="scale" data-perc="46"></div> <div class="scale" data-perc="44"></div> <div class="scale" data-perc="42"></div> <div class="scale" data-perc="40"></div> <div class="scale" data-perc="38"></div> <div class="scale" data-perc="36"></div> <div class="scale" data-perc="34"></div> <div class="scale" data-perc="32"></div> <div class="scale" data-perc="30"></div> <div class="scale" data-perc="28"></div> <div class="scale" data-perc="26"></div> <div class="scale" data-perc="24"></div> <div class="scale" data-perc="22"></div> <div class="scale" data-perc="20"></div> <div class="scale" data-perc="18"></div> <div class="scale" data-perc="16"></div> <div class="scale" data-perc="14"></div> <div class="scale" data-perc="12"></div> <div class="scale" data-perc="10"></div> <div class="scale" data-perc="8"></div> <div class="scale" data-perc="6"></div> <div class="scale" data-perc="4"></div> <div class="scale" data-perc="2"></div> <div class="scale" data-perc="0"></div> <div class="knob"></div> <div class="scalelabel"></div> </div> </div> <div class="faderwrapper"> <div class="fader"> <div class="scale" data-perc="100"></div> <div class="scale" data-perc="98"></div> <div class="scale" data-perc="96"></div> <div class="scale" data-perc="94"></div> <div class="scale" data-perc="92"></div> <div class="scale" data-perc="90"></div> <div class="scale" data-perc="88"></div> <div class="scale" data-perc="86"></div> <div class="scale" data-perc="84"></div> <div class="scale" data-perc="82"></div> <div class="scale" data-perc="80"></div> <div class="scale" data-perc="78"></div> <div class="scale" data-perc="76"></div> <div class="scale" data-perc="74"></div> <div class="scale" data-perc="72"></div> <div class="scale" data-perc="70"></div> <div class="scale" data-perc="68"></div> <div class="scale" data-perc="66"></div> <div class="scale" data-perc="64"></div> <div class="scale" data-perc="62"></div> <div class="scale" data-perc="60"></div> <div class="scale" data-perc="58"></div> <div class="scale" data-perc="56"></div> <div class="scale" data-perc="54"></div> <div class="scale" data-perc="52"></div> <div class="scale" data-perc="50"></div> <div class="scale" data-perc="48"></div> <div class="scale" data-perc="46"></div> <div class="scale" data-perc="44"></div> <div class="scale" data-perc="42"></div> <div class="scale" data-perc="40"></div> <div class="scale" data-perc="38"></div> <div class="scale" data-perc="36"></div> <div class="scale" data-perc="34"></div> <div class="scale" data-perc="32"></div> <div class="scale" data-perc="30"></div> <div class="scale" data-perc="28"></div> <div class="scale" data-perc="26"></div> <div class="scale" data-perc="24"></div> <div class="scale" data-perc="22"></div> <div class="scale" data-perc="20"></div> <div class="scale" data-perc="18"></div> <div class="scale" data-perc="16"></div> <div class="scale" data-perc="14"></div> <div class="scale" data-perc="12"></div> <div class="scale" data-perc="10"></div> <div class="scale" data-perc="8"></div> <div class="scale" data-perc="6"></div> <div class="scale" data-perc="4"></div> <div class="scale" data-perc="2"></div> <div class="scale" data-perc="0"></div> <div class="knob"></div> <div class="scalelabel"></div> </div> </div> <div class="faderwrapper"> <div class="fader"> <div class="scale" data-perc="100"></div> <div class="scale" data-perc="98"></div> <div class="scale" data-perc="96"></div> <div class="scale" data-perc="94"></div> <div class="scale" data-perc="92"></div> <div class="scale" data-perc="90"></div> <div class="scale" data-perc="88"></div> <div class="scale" data-perc="86"></div> <div class="scale" data-perc="84"></div> <div class="scale" data-perc="82"></div> <div class="scale" data-perc="80"></div> <div class="scale" data-perc="78"></div> <div class="scale" data-perc="76"></div> <div class="scale" data-perc="74"></div> <div class="scale" data-perc="72"></div> <div class="scale" data-perc="70"></div> <div class="scale" data-perc="68"></div> <div class="scale" data-perc="66"></div> <div class="scale" data-perc="64"></div> <div class="scale" data-perc="62"></div> <div class="scale" data-perc="60"></div> <div class="scale" data-perc="58"></div> <div class="scale" data-perc="56"></div> <div class="scale" data-perc="54"></div> <div class="scale" data-perc="52"></div> <div class="scale" data-perc="50"></div> <div class="scale" data-perc="48"></div> <div class="scale" data-perc="46"></div> <div class="scale" data-perc="44"></div> <div class="scale" data-perc="42"></div> <div class="scale" data-perc="40"></div> <div class="scale" data-perc="38"></div> <div class="scale" data-perc="36"></div> <div class="scale" data-perc="34"></div> <div class="scale" data-perc="32"></div> <div class="scale" data-perc="30"></div> <div class="scale" data-perc="28"></div> <div class="scale" data-perc="26"></div> <div class="scale" data-perc="24"></div> <div class="scale" data-perc="22"></div> <div class="scale" data-perc="20"></div> <div class="scale" data-perc="18"></div> <div class="scale" data-perc="16"></div> <div class="scale" data-perc="14"></div> <div class="scale" data-perc="12"></div> <div class="scale" data-perc="10"></div> <div class="scale" data-perc="8"></div> <div class="scale" data-perc="6"></div> <div class="scale" data-perc="4"></div> <div class="scale" data-perc="2"></div> <div class="scale" data-perc="0"></div> <div class="knob"></div> <div class="scalelabel"></div> </div> </div> <div class="faderwrapper"> <div class="fader"> <div class="scale" data-perc="100"></div> <div class="scale" data-perc="98"></div> <div class="scale" data-perc="96"></div> <div class="scale" data-perc="94"></div> <div class="scale" data-perc="92"></div> <div class="scale" data-perc="90"></div> <div class="scale" data-perc="88"></div> <div class="scale" data-perc="86"></div> <div class="scale" data-perc="84"></div> <div class="scale" data-perc="82"></div> <div class="scale" data-perc="80"></div> <div class="scale" data-perc="78"></div> <div class="scale" data-perc="76"></div> <div class="scale" data-perc="74"></div> <div class="scale" data-perc="72"></div> <div class="scale" data-perc="70"></div> <div class="scale" data-perc="68"></div> <div class="scale" data-perc="66"></div> <div class="scale" data-perc="64"></div> <div class="scale" data-perc="62"></div> <div class="scale" data-perc="60"></div> <div class="scale" data-perc="58"></div> <div class="scale" data-perc="56"></div> <div class="scale" data-perc="54"></div> <div class="scale" data-perc="52"></div> <div class="scale" data-perc="50"></div> <div class="scale" data-perc="48"></div> <div class="scale" data-perc="46"></div> <div class="scale" data-perc="44"></div> <div class="scale" data-perc="42"></div> <div class="scale" data-perc="40"></div> <div class="scale" data-perc="38"></div> <div class="scale" data-perc="36"></div> <div class="scale" data-perc="34"></div> <div class="scale" data-perc="32"></div> <div class="scale" data-perc="30"></div> <div class="scale" data-perc="28"></div> <div class="scale" data-perc="26"></div> <div class="scale" data-perc="24"></div> <div class="scale" data-perc="22"></div> <div class="scale" data-perc="20"></div> <div class="scale" data-perc="18"></div> <div class="scale" data-perc="16"></div> <div class="scale" data-perc="14"></div> <div class="scale" data-perc="12"></div> <div class="scale" data-perc="10"></div> <div class="scale" data-perc="8"></div> <div class="scale" data-perc="6"></div> <div class="scale" data-perc="4"></div> <div class="scale" data-perc="2"></div> <div class="scale" data-perc="0"></div> <div class="knob"></div> <div class="scalelabel"></div> </div> </div> <div class="faderwrapper"> <div class="fader"> <div class="scale" data-perc="100"></div> <div class="scale" data-perc="98"></div> <div class="scale" data-perc="96"></div> <div class="scale" data-perc="94"></div> <div class="scale" data-perc="92"></div> <div class="scale" data-perc="90"></div> <div class="scale" data-perc="88"></div> <div class="scale" data-perc="86"></div> <div class="scale" data-perc="84"></div> <div class="scale" data-perc="82"></div> <div class="scale" data-perc="80"></div> <div class="scale" data-perc="78"></div> <div class="scale" data-perc="76"></div> <div class="scale" data-perc="74"></div> <div class="scale" data-perc="72"></div> <div class="scale" data-perc="70"></div> <div class="scale" data-perc="68"></div> <div class="scale" data-perc="66"></div> <div class="scale" data-perc="64"></div> <div class="scale" data-perc="62"></div> <div class="scale" data-perc="60"></div> <div class="scale" data-perc="58"></div> <div class="scale" data-perc="56"></div> <div class="scale" data-perc="54"></div> <div class="scale" data-perc="52"></div> <div class="scale" data-perc="50"></div> <div class="scale" data-perc="48"></div> <div class="scale" data-perc="46"></div> <div class="scale" data-perc="44"></div> <div class="scale" data-perc="42"></div> <div class="scale" data-perc="40"></div> <div class="scale" data-perc="38"></div> <div class="scale" data-perc="36"></div> <div class="scale" data-perc="34"></div> <div class="scale" data-perc="32"></div> <div class="scale" data-perc="30"></div> <div class="scale" data-perc="28"></div> <div class="scale" data-perc="26"></div> <div class="scale" data-perc="24"></div> <div class="scale" data-perc="22"></div> <div class="scale" data-perc="20"></div> <div class="scale" data-perc="18"></div> <div class="scale" data-perc="16"></div> <div class="scale" data-perc="14"></div> <div class="scale" data-perc="12"></div> <div class="scale" data-perc="10"></div> <div class="scale" data-perc="8"></div> <div class="scale" data-perc="6"></div> <div class="scale" data-perc="4"></div> <div class="scale" data-perc="2"></div> <div class="scale" data-perc="0"></div> <div class="knob"></div> <div class="scalelabel"></div> </div> </div> </div>

@import url(https://fonts.googleapis.com/css?family=Montserrat); body {background:#333;height:400px;} .mainwrapper { position:relative; display:block; padding:40px 60px; margin:0 auto; width:400px; } .faderwrapper { position:relative; display:block; width:50px; height:306px; float:left; margin-right:30px; } .faderwrapper:before { position:absolute; display:block; content:""; width:2px; height:300px; top:2px; left:23px; background:#333; border:1px solid rgba(0,0,0,0.4); -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.4),0px 0px 2px 0px rgba(255, 255, 255, 0.25); box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.4),0px 0px 2px 0px rgba(255, 255, 255, 0.25); } .fader{ position:absolute; display:block; width:100%; height:100%; top:0; left:0; margin:0; padding:0; } .fader .scale { position:relative; display:block; width:100%; height:2%; margin:0; padding:0; z-index:10; cursor:pointer; } .knob { position:absolute; display:block; width:20px; height:20px; left:14px; bottom:-2%; -webkit-border-radius: 20px; border-radius: 20px; border:1px solid rgba(0,0,0,0.9); background: rgb(244,244,244); background: -moz-radial-gradient(center, ellipse cover, rgba(244,244,244,1) 0%, rgba(209,209,209,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(244,244,244,1)), color-stop(100%,rgba(209,209,209,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(244,244,244,1) 0%,rgba(209,209,209,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(244,244,244,1) 0%,rgba(209,209,209,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(244,244,244,1) 0%,rgba(209,209,209,1) 100%); background: radial-gradient(ellipse at center, rgba(244,244,244,1) 0%,rgba(209,209,209,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#d1d1d1',GradientType=1 ); -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5); z-index:9; -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -ms-transition: all 100ms linear; -o-transition: all 100ms linear; transition: all 100ms linear; } .knob:before { position:absolute; display:block; content:""; width:6px; height:6px; top:6px; left:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid rgba(0,0,0,0.4); background: rgb(226,0,0); background: -moz-radial-gradient(center, ellipse cover, rgba(226,0,0,1) 0%, rgba(137,0,0,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(226,0,0,1)), color-stop(100%,rgba(137,0,0,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(226,0,0,1) 0%,rgba(137,0,0,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(226,0,0,1) 0%,rgba(137,0,0,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(226,0,0,1) 0%,rgba(137,0,0,1) 100%); background: radial-gradient(ellipse at center, rgba(226,0,0,1) 0%,rgba(137,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e20000', endColorstr='#890000',GradientType=1 ); -webkit-box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.45), 0px 4px 4px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.45), 0px 4px 4px 0px rgba(0, 0, 0, 0.2); } .fader .scale:hover ~ .knob:before { background: rgb(149,224,0); background: -moz-radial-gradient(center, ellipse cover, rgba(149,224,0,1) 0%, rgba(90,135,0,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(149,224,0,1)), color-stop(100%,rgba(90,135,0,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(149,224,0,1) 0%,rgba(90,135,0,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(149,224,0,1) 0%,rgba(90,135,0,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(149,224,0,1) 0%,rgba(90,135,0,1) 100%); background: radial-gradient(ellipse at center, rgba(149,224,0,1) 0%,rgba(90,135,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95e000', endColorstr='#5a8700',GradientType=1 ); } .scalelabel { position:absolute; display:block; width:40px; height:20px; bottom:-2%; right:-15px; opacity:0; border:1px solid rgba(0,0,0,0.6); -webkit-border-radius:0 2px 2px 0; border-radius:0 2px 2px 0; background: rgb(102,102,102); background: -moz-linear-gradient(top, rgba(102,102,102,1) 0%, rgba(51,51,51,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,102,102,1)), color-stop(100%,rgba(51,51,51,1))); background: -webkit-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%); background: -o-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%); background: -ms-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%); background: linear-gradient(to bottom, rgba(102,102,102,1) 0%,rgba(51,51,51,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#333333',GradientType=0 ); -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.25),inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.2), 1px 0px 4px 0px rgba(0, 0, 0, 0.5); box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.25),inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.2), 1px 0px 4px 0px rgba(0, 0, 0, 0.5); z-index:8; -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -ms-transition: all 100ms linear; -o-transition: all 100ms linear; transition: all 100ms linear; } .scalelabel:before { position:relative; display:block; content:"0"; color:#fff; text-align:right; padding-right:5px; font-family: 'Montserrat', sans-serif; font-size:12px; font-weight:bold; line-height:20px; } .fader .scale[data-perc="0"]:hover ~ .knob,.fader .scale[data-perc="0"]:hover ~ .scalelabel {bottom:-2%;} .fader .scale[data-perc="2"]:hover ~ .knob,.fader .scale[data-perc="2"]:hover ~ .scalelabel {bottom:0%;} .fader .scale[data-perc="4"]:hover ~ .knob,.fader .scale[data-perc="4"]:hover ~ .scalelabel {bottom:2%;} .fader .scale[data-perc="6"]:hover ~ .knob,.fader .scale[data-perc="6"]:hover ~ .scalelabel {bottom:4%} .fader .scale[data-perc="8"]:hover ~ .knob,.fader .scale[data-perc="8"]:hover ~ .scalelabel {bottom:6%;} .fader .scale[data-perc="10"]:hover ~ .knob,.fader .scale[data-perc="10"]:hover ~ .scalelabel {bottom:8%} .fader .scale[data-perc="12"]:hover ~ .knob,.fader .scale[data-perc="12"]:hover ~ .scalelabel {bottom:10%;} .fader .scale[data-perc="14"]:hover ~ .knob,.fader .scale[data-perc="14"]:hover ~ .scalelabel {bottom:12%;} .fader .scale[data-perc="16"]:hover ~ .knob,.fader .scale[data-perc="16"]:hover ~ .scalelabel {bottom:14%;} .fader .scale[data-perc="18"]:hover ~ .knob,.fader .scale[data-perc="18"]:hover ~ .scalelabel {bottom:16%;} .fader .scale[data-perc="20"]:hover ~ .knob,.fader .scale[data-perc="20"]:hover ~ .scalelabel {bottom:18%;} .fader .scale[data-perc="22"]:hover ~ .knob,.fader .scale[data-perc="22"]:hover ~ .scalelabel {bottom:20%;} .fader .scale[data-perc="24"]:hover ~ .knob,.fader .scale[data-perc="24"]:hover ~ .scalelabel {bottom:22%;} .fader .scale[data-perc="26"]:hover ~ .knob,.fader .scale[data-perc="26"]:hover ~ .scalelabel {bottom:24%;} .fader .scale[data-perc="28"]:hover ~ .knob,.fader .scale[data-perc="28"]:hover ~ .scalelabel {bottom:26%;} .fader .scale[data-perc="30"]:hover ~ .knob,.fader .scale[data-perc="30"]:hover ~ .scalelabel {bottom:28%;} .fader .scale[data-perc="32"]:hover ~ .knob,.fader .scale[data-perc="32"]:hover ~ .scalelabel {bottom:30%;} .fader .scale[data-perc="34"]:hover ~ .knob,.fader .scale[data-perc="34"]:hover ~ .scalelabel {bottom:32%;} .fader .scale[data-perc="36"]:hover ~ .knob,.fader .scale[data-perc="36"]:hover ~ .scalelabel {bottom:34%;} .fader .scale[data-perc="38"]:hover ~ .knob,.fader .scale[data-perc="38"]:hover ~ .scalelabel {bottom:36%;} .fader .scale[data-perc="40"]:hover ~ .knob,.fader .scale[data-perc="40"]:hover ~ .scalelabel {bottom:38%;} .fader .scale[data-perc="42"]:hover ~ .knob,.fader .scale[data-perc="42"]:hover ~ .scalelabel {bottom:40%;} .fader .scale[data-perc="44"]:hover ~ .knob,.fader .scale[data-perc="44"]:hover ~ .scalelabel {bottom:42%;} .fader .scale[data-perc="46"]:hover ~ .knob,.fader .scale[data-perc="46"]:hover ~ .scalelabel {bottom:44%;} .fader .scale[data-perc="48"]:hover ~ .knob,.fader .scale[data-perc="48"]:hover ~ .scalelabel {bottom:46%;} .fader .scale[data-perc="50"]:hover ~ .knob,.fader .scale[data-perc="50"]:hover ~ .scalelabel {bottom:48%;} .fader .scale[data-perc="52"]:hover ~ .knob,.fader .scale[data-perc="52"]:hover ~ .scalelabel {bottom:50%;} .fader .scale[data-perc="54"]:hover ~ .knob,.fader .scale[data-perc="54"]:hover ~ .scalelabel {bottom:52%;} .fader .scale[data-perc="56"]:hover ~ .knob,.fader .scale[data-perc="56"]:hover ~ .scalelabel {bottom:54%;} .fader .scale[data-perc="58"]:hover ~ .knob,.fader .scale[data-perc="58"]:hover ~ .scalelabel {bottom:56%;} .fader .scale[data-perc="60"]:hover ~ .knob,.fader .scale[data-perc="60"]:hover ~ .scalelabel {bottom:58%;} .fader .scale[data-perc="62"]:hover ~ .knob,.fader .scale[data-perc="62"]:hover ~ .scalelabel {bottom:60%;} .fader .scale[data-perc="64"]:hover ~ .knob,.fader .scale[data-perc="64"]:hover ~ .scalelabel {bottom:62%;} .fader .scale[data-perc="66"]:hover ~ .knob,.fader .scale[data-perc="66"]:hover ~ .scalelabel {bottom:64%;} .fader .scale[data-perc="68"]:hover ~ .knob,.fader .scale[data-perc="68"]:hover ~ .scalelabel {bottom:66%;} .fader .scale[data-perc="70"]:hover ~ .knob,.fader .scale[data-perc="70"]:hover ~ .scalelabel {bottom:68%;} .fader .scale[data-perc="72"]:hover ~ .knob,.fader .scale[data-perc="72"]:hover ~ .scalelabel {bottom:70%;} .fader .scale[data-perc="74"]:hover ~ .knob,.fader .scale[data-perc="74"]:hover ~ .scalelabel {bottom:72%;} .fader .scale[data-perc="76"]:hover ~ .knob,.fader .scale[data-perc="76"]:hover ~ .scalelabel {bottom:74%;} .fader .scale[data-perc="78"]:hover ~ .knob,.fader .scale[data-perc="78"]:hover ~ .scalelabel {bottom:76%;} .fader .scale[data-perc="80"]:hover ~ .knob,.fader .scale[data-perc="80"]:hover ~ .scalelabel {bottom:78%;} .fader .scale[data-perc="82"]:hover ~ .knob,.fader .scale[data-perc="82"]:hover ~ .scalelabel {bottom:80%;} .fader .scale[data-perc="84"]:hover ~ .knob,.fader .scale[data-perc="84"]:hover ~ .scalelabel {bottom:82%;} .fader .scale[data-perc="86"]:hover ~ .knob,.fader .scale[data-perc="86"]:hover ~ .scalelabel {bottom:84%;} .fader .scale[data-perc="88"]:hover ~ .knob,.fader .scale[data-perc="88"]:hover ~ .scalelabel {bottom:86%;} .fader .scale[data-perc="90"]:hover ~ .knob,.fader .scale[data-perc="90"]:hover ~ .scalelabel {bottom:88%;} .fader .scale[data-perc="92"]:hover ~ .knob,.fader .scale[data-perc="92"]:hover ~ .scalelabel {bottom:90%;} .fader .scale[data-perc="94"]:hover ~ .knob,.fader .scale[data-perc="94"]:hover ~ .scalelabel {bottom:92%;} .fader .scale[data-perc="96"]:hover ~ .knob,.fader .scale[data-perc="96"]:hover ~ .scalelabel {bottom:94%;} .fader .scale[data-perc="98"]:hover ~ .knob,.fader .scale[data-perc="98"]:hover ~ .scalelabel {bottom:96%;} .fader .scale[data-perc="100"]:hover ~ .knob,.fader .scale[data-perc="100"]:hover ~ .scalelabel {bottom:98%;} .fader .scale[data-perc="0"]:hover ~ .scalelabel:before {content:"0";} .fader .scale[data-perc="2"]:hover ~ .scalelabel:before {content:"2";} .fader .scale[data-perc="4"]:hover ~ .scalelabel:before {content:"4";} .fader .scale[data-perc="6"]:hover ~ .scalelabel:before {content:"6";} .fader .scale[data-perc="8"]:hover ~ .scalelabel:before {content:"8";} .fader .scale[data-perc="10"]:hover ~ .scalelabel:before {content:"10";} .fader .scale[data-perc="12"]:hover ~ .scalelabel:before {content:"12";} .fader .scale[data-perc="14"]:hover ~ .scalelabel:before {content:"14";} .fader .scale[data-perc="16"]:hover ~ .scalelabel:before {content:"16";} .fader .scale[data-perc="18"]:hover ~ .scalelabel:before {content:"18";} .fader .scale[data-perc="20"]:hover ~ .scalelabel:before {content:"20";} .fader .scale[data-perc="22"]:hover ~ .scalelabel:before {content:"22";} .fader .scale[data-perc="24"]:hover ~ .scalelabel:before {content:"24";} .fader .scale[data-perc="26"]:hover ~ .scalelabel:before {content:"26";} .fader .scale[data-perc="28"]:hover ~ .scalelabel:before {content:"28";} .fader .scale[data-perc="30"]:hover ~ .scalelabel:before {content:"30";} .fader .scale[data-perc="32"]:hover ~ .scalelabel:before {content:"32";} .fader .scale[data-perc="34"]:hover ~ .scalelabel:before {content:"34";} .fader .scale[data-perc="36"]:hover ~ .scalelabel:before {content:"36";} .fader .scale[data-perc="38"]:hover ~ .scalelabel:before {content:"38";} .fader .scale[data-perc="40"]:hover ~ .scalelabel:before {content:"40";} .fader .scale[data-perc="42"]:hover ~ .scalelabel:before {content:"42";} .fader .scale[data-perc="44"]:hover ~ .scalelabel:before {content:"44";} .fader .scale[data-perc="46"]:hover ~ .scalelabel:before {content:"46";} .fader .scale[data-perc="48"]:hover ~ .scalelabel:before {content:"48";} .fader .scale[data-perc="50"]:hover ~ .scalelabel:before {content:"50";} .fader .scale[data-perc="52"]:hover ~ .scalelabel:before {content:"52";} .fader .scale[data-perc="54"]:hover ~ .scalelabel:before {content:"54";} .fader .scale[data-perc="56"]:hover ~ .scalelabel:before {content:"56";} .fader .scale[data-perc="58"]:hover ~ .scalelabel:before {content:"58";} .fader .scale[data-perc="60"]:hover ~ .scalelabel:before {content:"60";} .fader .scale[data-perc="62"]:hover ~ .scalelabel:before {content:"62";} .fader .scale[data-perc="64"]:hover ~ .scalelabel:before {content:"64";} .fader .scale[data-perc="66"]:hover ~ .scalelabel:before {content:"66";} .fader .scale[data-perc="68"]:hover ~ .scalelabel:before {content:"68";} .fader .scale[data-perc="70"]:hover ~ .scalelabel:before {content:"70";} .fader .scale[data-perc="72"]:hover ~ .scalelabel:before {content:"72";} .fader .scale[data-perc="74"]:hover ~ .scalelabel:before {content:"74";} .fader .scale[data-perc="76"]:hover ~ .scalelabel:before {content:"76";} .fader .scale[data-perc="78"]:hover ~ .scalelabel:before {content:"78";} .fader .scale[data-perc="80"]:hover ~ .scalelabel:before {content:"80";} .fader .scale[data-perc="82"]:hover ~ .scalelabel:before {content:"82";} .fader .scale[data-perc="84"]:hover ~ .scalelabel:before {content:"84";} .fader .scale[data-perc="86"]:hover ~ .scalelabel:before {content:"86";} .fader .scale[data-perc="88"]:hover ~ .scalelabel:before {content:"88";} .fader .scale[data-perc="90"]:hover ~ .scalelabel:before {content:"90";} .fader .scale[data-perc="92"]:hover ~ .scalelabel:before {content:"92";} .fader .scale[data-perc="94"]:hover ~ .scalelabel:before {content:"94";} .fader .scale[data-perc="96"]:hover ~ .scalelabel:before {content:"96";} .fader .scale[data-perc="98"]:hover ~ .scalelabel:before {content:"98";} .fader .scale[data-perc="100"]:hover ~ .scalelabel:before {content:"100";} .fader .scale:hover ~ .scalelabel {opacity:1;}

Tutorials Palace 12 January, 2019 No Comments

106 Views