/* Demo purposes only */ $(".hover").mouseleave( function () { $(this).removeClass("hover"); } ); @import url(https://fonts.googleapis.com/css?family=Work+Sans); .snip1526 { font-family: 'Work Sans', Arial, sans-serif; text-align: center; text-transform: uppercase; font-weight: 400; } .snip1526 *, .snip1526 *:after { box-sizing: border-box; -webkit-transition: all 0.25s linear; transition: all 0.25s linear; } .snip1526 li { display: inline-block; list-style: outside none none; margin: 0.5em 0.6em; -webkit-perspective: 50em; perspective: 50em; } .snip1526 a { backface-visibility: hidden; color: #ffffff; display: block; line-height: 2.2em; padding: 0 1.4em; position: relative; text-decoration: none; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; background-color: #667273; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } .snip1526 a:after { background-color: #5c122e; color: transparent; content: attr(data-hover); top: 0%; line-height: 2.2em; position: absolute; left: 100%; width: 100%; -webkit-transform: translateX(0%) rotateY(90deg); transform: translateX(0%) rotateY(90deg); -webkit-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; transform-origin: 0% 50%; } .snip1526 li:hover a, .snip1526 li.current a { -webkit-transform: translate(-50%) rotateY(-90deg); transform: translate(-50%) rotateY(-90deg); background-color: #1e2222; color: transparent; } .snip1526 li:hover a:after, .snip1526 li.current a:after { background-color: #b12358; color: #ffffff; cursor: pointer; } <ul class="snip1526"> <li class="current"><a href="#" data-hover="Home">Home</a></li> <li><a href="#" data-hover="About Us">About Us</a></li> <li><a href="#" data-hover="Blog">Blog</a></li> <li><a href="#" data-hover="Services">Services</a></li> <li><a href="#" data-hover="Products">Products</a></li> <li><a href="#" data-hover="Contact">Contact</a></li> </ul>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter