"hover gate"
Bootstrap 3.0.0 Snippet by saadmohmedfsociety

<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 ----------> <html> <head> <title>Converter</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> </head> <body> <div class="container-fluid"> <i class="fa fa-angle-double-up fa-5x" aria-hidden="true"></i> <nav class="layer"> <ul> <li> <a href="converter.html"> <i class="fa fa-hourglass-end" aria-hidden="true"></i>Let's Converte</a></li> <li><a href="physics.html"><i class="saad2 fa fa-flask" aria-hidden="true"></i>Physics Constants</a></li> <li><a href="#"><i class="fa fa-superscript" aria-hidden="true"></i>Math Constants</a></li> </ul> </nav> <section class="saad front"> <div class="mySlides" href="https://static.pexels.com/photos/7837/pexels-photo.jpg" style="width:100%;height:100%;background:black"></div> <div class="mySlides" src="cover.jpg" style=" background:#006699;width:100%; height:100%;"></div> <div class="mySlides" src="cal.jpeg" style="background:aqua;width:100%;background-size:contain;height:100%;"></di> <div class="mySlides" src="pyd.jpeg" style="width:100%;height:100%; background:lightblue"></div> </section> </div> </body> <script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 3000); } </script> </html>
body{@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700'); font-family: 'Roboto Condensed'; text-transform: uppercase; background:linear-gradient(45deg, aqua, #2496f9, #1dc3ad, #06ef48); height: 100%; overflow: hidden; margin:0; padding:4px; } section{ width:100%; height:100%; box-shadow:0px 0px 100px black; position:fixed; background:orange; background-position:center center; background-size:cover; text-align:center; left:0; top:0; right:0; bottom:0; transition: transform .4s; transform: perspective(800px) scale(1) translateX(0.1%) rotateY(-8deg) ; transform-style: preserve-3d; } nav{ vertical-align: center; position:fixed; display:flex; top:40%; right:65%; align-items: center; justify-content: center; vertical-align: center; width:700px; transition: transform .4s; transform: perspective(800px) scale(1) translateX(0) rotateY(0); transform-style: preserve-3d; background:rbga(0,0,0,1); width:100%; overflow:hidden; } nav ul{ padding-left: 66.66%; font-size: larger; line-height: 2; } nav ul li{ list-style-type: none; padding:10px; } nav ul li a{ text-decoration: none; color:#cae8fc; padding:15px; font-size:40px; font-weight:1000; text-shadow:0px 0px 15px black; transform:scale(0.9); } body:hover .front{ transform: perspective(700px) scale(0.5) translateX(-16.66%) rotateY(-25deg) rotateZ(10deg); transition: all 0.7s; left:10%; border-radius:6px; -webkit-filter: grayscale(100%); filter: grayscale(90%); } body:hover .fa-angle-double-up{ display:none; transition:all 0.7s; } .saadmoh{ font-size:40px; font-weight:900; width:100%; height:100%; font-family:bold; padding-top:30%; position:absolute; left:0; right:0; bottom:0; top:0; color:white; background:rgba(0,0,0,0.7); } nav a:hover{ color:black; transition:all 0.7s; } .fa-angle-double-up{ transform:rotateZ(120deg); color:rgba(0,0,0,0.5); position:absolute; font-weight:700; letter-spacing:2px; animation-name: ani; animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @keyframes ani{ from{opacity:0.2;top:0;left:10} to{opacity:1;top:10px;left:20px;} }
<script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 3000); } </script>

Related: See More


Questions / Comments: