Microsoft Fluent Material

HTML
<div class="perspective"> <div class="container"> <span class="title">Background</span> <div class="background"> <span class="title">Base</span> <div class="cont_blur"> <div class="blur"></div> <span class="title">Gaussian blur</span> </div> <div class="color"> <span class="title">Color overlay</span> </div> <div class="noise"> <span class="title">Noise</span> </div> </div> </div> <span class="tip">Hover Me</span> </div>
CSS
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500"); * { margin: 0; box-sizing: border-box; } html, body { background: #f6f6f6; } .perspective { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 800px; height: 450px; -webkit-perspective: 1200; perspective: 1200; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .perspective .tip { position: absolute; font-family: 'Roboto', sans-serif; font-size: 55px; font-weight: 300; text-align: center; color: rgba(20, 20, 20, 0.5); top: 50%; left: 50%; -webkit-transform: translateZ(0px); transform: translateZ(0px); opacity: 1; } .perspective:hover .tip { opacity: 0; } .perspective:hover .container { -webkit-transform: rotateY(47deg) rotateX(0deg) rotateZ(-5deg); transform: rotateY(47deg) rotateX(0deg) rotateZ(-5deg); -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; } .perspective:hover .background .cont_blur { -webkit-transform: translateZ(165px); transform: translateZ(165px); -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; } .perspective:hover .background .color { -webkit-transform: translateZ(275px); transform: translateZ(275px); -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; } .perspective:hover .background .noise { -webkit-transform: translateZ(385px); transform: translateZ(385px); -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; border: 1px solid rgba(0, 0, 0, 0.3); } .perspective:hover .title { opacity: 1; } .container { position: absolute; width: 800px; height: 450px; background: url("http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-desktop-wallpapers_04232231_304.jpg"); background-size: cover; -webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 0.6s; transition: all 0.6s; } .container .background { width: 800px; height: 450px; margin-left: 120px; margin-top: 50px; box-shadow: 32px 45px 150px -15px rgba(0, 0, 0, 0.14), inset 0px 0px 30px rgba(50, 50, 50, 0.1); background: white; } .container .background .cont_blur { position: absolute; width: inherit; height: inherit; z-index: 5; -webkit-transform: translateZ(0px); transform: translateZ(0px); -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; } .container .background .cont_blur .blur { position: absolute; width: inherit; height: inherit; background: url("http://s1.picswalls.com/wallpapers/2016/03/29/beautiful-nature-desktop-wallpapers_04232231_304.jpg"); background-size: cover; background-repeat: no-repeat; background-position: -125px -50px; -webkit-filter: blur(40px); filter: blur(40px); } .container .background .color { position: absolute; width: 100%; height: 100%; background: rgba(240, 240, 240, 0.5); z-index: 10; -webkit-transform: translateZ(0px); transform: translateZ(0px); -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; } .container .background .noise { position: absolute; width: 800px; height: 450px; background: url("http://i.imgur.com/P0Kkvuv.png"); opacity: 1; z-index: 15; -webkit-transform: translateZ(0px); transform: translateZ(0px); -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; border: none; } .title { position: absolute; font-family: 'Roboto', sans-serif; font-size: 15px; font-weight: 300; color: #fff; padding: 7px; background: #222; opacity: 0; }
JAVASCRIPT
Expand for more options Login