"Grid hover effect( FAN )"
Bootstrap 3.0.0 Snippet by Ashwani Rawat

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <div class="main"> <div class="fan-border"> <div class="fan-circle"><div class="flip-head"> <div class="fan-flip"></div> <div class="fan-flip Right"></div> <div class="fan-flip left"></div> </div></div> <div class="fan-bigcircle"></div> <div class="main-storm"> <div class="stormy"></div> <div class="stormy one"></div> <div class="stormy two"></div> <div class="stormy three"></div> <div class="stormy four"></div> <div class="stormy five"></div> <div class="stormy six"></div> <div class="stormy seven"></div> <div class="stormy eight"></div> <div class="stormy nine"></div> <div class="stormy ten"></div> <div class="stormy eleven"></div> <div class="stormy twelve"></div> <div class="stormy thirteen"></div> <div class="stormy fourteen"></div> <div class="stormy fifteen"></div> <div class="stormy sixteen"></div> <div class="stormy eighteen"></div> <div class="stormy nineteen"></div> <div class="stormy twenty"></div> <div class="stormy twentyone"></div> <div class="stormy twentytwo"></div> <div class="stormy twentythree"></div> </div> <div class="fan-bottom"> <div class="grills-side"></div> <div class="fan-btn"><div class="fancircle-btn"> <button class="on" type="button">on</button> <button class="of" type="button">of</button> </div></div> </div> <div class="logo-name">sachin</div> </div> </div> </div>
*{ padding:0; margin:0 } .main{ float: left; width: 100%; position: relative;} .fan-border{ border-radius:50%; width:300px; height:300px; border:6px solid #0f86b3; margin:auto;} .logo-name{ background: #fff; color: #806e6e; width: 100px; height: 100px; border-radius: 50%; position: absolute; top: 100px; left: 45.9%; text-align: center; font-weight: 600; font-size: 11px; box-shadow: 1px -2px 7px 2px #b3b3b3; z-index:99; line-height: 100px; } .fan-flip{ background: rgb(15, 134, 179); width: 50px; height: 85px; position: absolute; top: -16px; left: 36%; z-index: 5; border-radius: 0 0 10px 10px; box-shadow: 0px 1px 20px #000; } .cog { /* -webkit-animation: cog .8s infinite; */ -moz-animation: cog .8s infinite; -ms-animation: cog .8s infinite; animation: cog .8s infinite; /* -webkit-animation-timing-function: linear; */ -moz-animation-timing-function: linear; -ms-animation-timing-function: linear; animation-timing-function: linear; } @keyframes cog { 100%{ -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg) } } .fan-flip:after{ position: absolute; content: ""; width: 0px; height: 0px; border-top: 80px Solid rgb(15, 134, 179); border-left: 0px solid transparent; border-right: 25px solid transparent; right: -24px; top: 0px; border-radius: 0px 25px 0 0; } .fan-flip:before{ position: absolute; content: ""; width: 0px; height: 0px; border-top: 80px Solid rgb(15, 134, 179); border-right: 0px solid transparent; border-left: 25px solid transparent; left: -24px; top: 0px; border-radius: 30px 0 0px 0; } .Right{ -ms-transform: rotate(110deg); -webkit-transform: rotate(110deg); transform: rotate(110deg); position: absolute; top: 86px; left: 72.1%; } .left{ -ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(245deg); position: absolute; top: 100px; left: 4.2%; } .stormy{ width: 1px; height: 288px; background: #9fa3ae; position: absolute; top: 6px; left: 50%; box-shadow: 0px 0px 1px #000; } .one{ -ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg);} .two{-ms-transform: rotate(14deg); -webkit-transform: rotate(14deg); transform: rotate(14deg);} .three{-ms-transform: rotate(21deg); -webkit-transform: rotate(21deg); transform: rotate(21deg);} .four{-ms-transform: rotate(28deg); -webkit-transform: rotate(28deg); transform: rotate(28deg);} .five{-ms-transform: rotate(35deg); -webkit-transform: rotate(35deg); transform: rotate(35deg);} .six{-ms-transform: rotate(42deg); -webkit-transform: rotate(42deg); transform: rotate(42deg);} .seven{-ms-transform: rotate(49deg); -webkit-transform: rotate(49deg); transform: rotate(49deg);} .eight{-ms-transform: rotate(56deg); -webkit-transform: rotate(56deg); transform: rotate(56deg);} .nine{-ms-transform: rotate(63deg); -webkit-transform: rotate(63deg); transform: rotate(63deg);} .ten{-ms-transform: rotate(70deg); -webkit-transform: rotate(70deg); transform: rotate(70deg);} .eleven{-ms-transform: rotate(77deg); -webkit-transform: rotate(77deg); transform: rotate(77deg);} .twelve{-ms-transform: rotate(84deg); -webkit-transform: rotate(84deg); transform: rotate(84deg);} .thirteen{-ms-transform: rotate(91deg); -webkit-transform: rotate(91deg); transform: rotate(91deg);} .fourteen{-ms-transform: rotate(98deg); -webkit-transform: rotate(98deg); transform: rotate(98deg);} .fifteen{-ms-transform: rotate(105deg); -webkit-transform: rotate(105deg); transform: rotate(105deg);} .sixteen{ -ms-transform: rotate(112deg); -webkit-transform: rotate(112deg); transform: rotate(115deg); } .eighteen{ -ms-transform: rotate(119deg); -webkit-transform: rotate(119deg); transform: rotate(125deg); } .nineteen{ -ms-transform: rotate(126deg); -webkit-transform: rotate(126deg); transform: rotate(134deg); } .twenty{ -ms-transform: rotate(133deg); -webkit-transform: rotate(133deg); transform: rotate(144deg); } .twentyone{ -ms-transform: rotate(140deg); -webkit-transform: rotate(140deg); transform: rotate(153deg); } .twentytwo{ -ms-transform: rotate(147deg); -webkit-transform: rotate(147deg); transform: rotate(162deg); } .twentythree{ -ms-transform: rotate(154deg); -webkit-transform: rotate(154deg); transform: rotate(171deg); } .fan-circle{ width: 220px; height: 220px; border-radius: 50%; border:1px solid #9ea6b2; position: absolute; top: 42px; left: 41.4%; } .fan-bigcircle{ width: 250px; height: 250px; border-radius: 50%; border: 1px solid #9ea6b2; position: absolute; top: 25px; left: 40%; z-index: 10; } .main-storm{ float:left;width:100%;} .flip-head{ float:left; width:100%; position: absolute; left: 0; height: 100%; top: 0; } .grills-side{ background: #cfd1db; height: 215px; width: 26px; position: absolute; top: 62%; left: 48.8%; z-index: -1; } .grills-side::after{ position: absolute; content: ""; width: 0px; height: 0px; border-bottom: 215px Solid rgb(207, 209, 219); border-right: 0px solid transparent; border-left: 14px solid transparent; left: -13px; top: 0px; border-radius: 30px 0 0 40px; } .grills-side::before{ position: absolute; content: ""; width: 0px; height: 0px; border-bottom: 215px Solid rgb(207, 209, 219); border-left: 0px solid transparent; border-right: 14px solid transparent; right: -14px; top: 0px; border-radius: 30px 0 40px 0; } .fan-btn{ background: #0f86b3; height: 76px; width: 176px; position: absolute; left: 42.8%; top: 120%; border-radius: 60px 60px 10px 10px; z-index: -3; } .fancircle-btn{ border-radius: 50%; background: #fff; height: 48px; width: 145px; position: absolute; left: 19px; top: 12px; } .on{ height: 30px; width: 30px; position: absolute; top: 8px; left: 13px; font-size: 10px; background: #0f86b3; border: none; color: #fff; text-transform: uppercase; border-radius: 6px; outline: none; } .of{ height: 30px; width: 30px; position: absolute; top: 8px; left: 103px; font-size: 10px; background: #0f86b3; border: none; color: #fff; text-transform: uppercase; border-radius: 6px; outline: none; } /* Made by Ashwani */
$(document).ready(function(){ $(".on").click(function(){ $(".flip-head").addClass("cog"); }); }); $(document).ready(function(){ $(".of").click(function(){ $(".flip-head").removeClass("cog"); }); });

Questions / Comments: