Develop Reference

How can I disable scrolling when my hamburger menu is open?

I am working on a website with a hamburger menu that fills the entire page when clicked. The only problem is the page behind still scrolls when the nav is open, and I can't figure out how to disable scrolling while the menu is open. I have tried changing overflow-y: hidden, but it doesn't seem to work.
Here is the HTML for the menu:
<div id="menu">
<div class="logotext">
ONWORD
</div>
<input type="checkbox" id="myInput">
<label for="myInput">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
</label>
<aside>
<div class="aside-section aside-left">
<div class="aside-content">
<p> Languages of the land</p>
</div>
</div>
<div class="aside-section aside-right">
<ul class="aside-list">
<li>Start Learning</li>
<li>Language Map</li>
<li>History</li>
<li>Stories</li>
<li>Contact</li>
</ul>
</div>
</aside>
</div>
Here is the CSS:
.logotext a {
font-family: "Raleway", sans-serif;
font-size: 20px;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
left: 1%;
z-index: 99999;
color: white;
position: absolute;
padding-left: 19px;
padding-right: 19px;
padding-top: 22px;
transition: 0.5s;
}
.logotext a:hover {
-webkit-transform: scale(0.9);
transition-delay: 200ms;
transition-duration: 0.5s;
}
.aside-section {
top: 0;
bottom: 0;
position: absolute;
z-index: 99998;
overflow: hidden;
}
.aside-left {
display: none;
width: 40%;
left: 0;
background-color: white;
background-image: url(../img/menu1.jpeg);
background-position: center;
background-size: cover;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
transition: transform 0.4s ease-in-out;
z-index: 99998;
position: fixed;
overflow-y: hidden;
}
.aside-right {
width: 100%;
right: 0;
background-color: #000000;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
transition: transform 0.4s ease-in-out;
z-index: 99998;
position: fixed;
overflow-y: hidden;
}
.aside-list {
list-style: none;
padding: 0;
margin: 0;
margin-top: 160px;
text-align: left;
padding-left: 50px;
z-index: 99998;
}
.aside-content {
margin-top: 150px;
padding: 0 40px;
position: relative;
color: #000000;
text-align: center;
z-index: 99998;
}
.aside-list li {
margin-bottom: 20px;
z-index: 99998;
padding-bottom: 7px;
}
.aside-anchor::after {
content: "";
position: absolute;
bottom: 0;
background-color: #000000;
left: 0;
right: 0;
height: 2px;
border-radius: 3px;
}
.aside-anchor::before {
border-radius: 3px;
content: "";
position: absolute;
bottom: 0;
background-color: #f5eded;
left: 0;
height: 1px;
z-index: 1;
width: 50%;
-webkit-transition: transform 0.2s ease-in-out;
-o-transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
}
.aside-anchor:hover:before {
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
background-color: #dd8800;
}
.aside-anchor {
padding-bottom: 5px;
color: #fff;
text-decoration: none;
font-size: 14px;
position: relative;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked ~ aside .aside-left {
transform: translateY(0%);
}
input[type="checkbox"]:checked ~ aside .aside-right {
transform: translateX(0%);
}
input[type="checkbox"]:checked ~ label .bar {
background-color: #fff;
}
input[type="checkbox"]:checked ~ label .top {
-webkit-transform: translateY(0px) rotateZ(45deg);
-moz-transform: translateY(0px) rotateZ(45deg);
-ms-transform: translateY(0px) rotateZ(45deg);
-o-transform: translateY(0px) rotateZ(45deg);
transform: translateY(0px) rotateZ(45deg);
}
input[type="checkbox"]:checked ~ label .bottom {
-webkit-transform: translateY(-15px) rotateZ(-45deg);
-moz-transform: translateY(-15px) rotateZ(-45deg);
-ms-transform: translateY(-15px) rotateZ(-45deg);
-o-transform: translateY(-15px) rotateZ(-45deg);
transform: translateY(-15px) rotateZ(-45deg);
}
input[type="checkbox"]:checked ~ label .middle {
width: 0;
}
.middle {
margin: 0 auto;
}
label {
top: 10px;
display: inline-block;
padding: 7px 10px;
background-color: transparent;
cursor: pointer;
margin: 10px;
position: absolute;
z-index: 99999;
text-align: right;
right: 1%;
transition: 0.5s;
}
label:hover {
-webkit-transform: scale(0.9);
transition-delay: 200ms;
transition-duration: 0.5s;
}
.bar {
display: block;
background-color: #ffffff;
width: 30px;
height: 3px;
border-radius: 5px;
margin: 5px auto;
transition: background-color 0.4s ease-in, transform 0.4s ease-in,
width 0.4s ease-in;
z-index: 99999;
}
.aside-section h1 {
margin: 0;
position: relative;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;
font-size: 35px;
font-family: 'BritishShorthair';
}
.aside-section p {
font-size: 90px;
text-align: center;
line-height: 130px;
font-family: 'BritishShorthair';
margin-top: 0px;
color: white;
}
#media (min-width: 992px) {
h1 {
font-size: 40px;
}
.aside-left {
display: block;
}
.aside-right {
width: 60%;
}
}

When you said you set overflow-y: hidden. Did you do this on the body?

JS match list item color with selected item

I'm trying to get the .title color to match the selected .cat-item but I can't figure out how to work it into my code.
var $container = $(".cat-dropdown-menu"),
$list = $(".cat-dropdown-menu .cat-list"),
listItem = $list.find(".cat-item");
$(".cat-dropdown .title").click(function() {
if ($container.height() > 0) {
closeMenu(this);
} else {
openMenu(this);
}
});
$(".cat-dropdown-menu .cat-item").click(function() {
closeMenu(this);
});
function closeMenu(el) {
$(el)
.closest(".cat-dropdown")
.toggleClass("closed")
.find(".title")
.text($(el).text());
$container.css("height", 0);
$list.css("top", 0);
}
function openMenu(el) {
$(el)
.parent()
.toggleClass("closed");
$container.css({
height: 200
});
}
#charset "UTF-8";
/* OPTIONS */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.cat-dropdown {
text-align: left;
color: #343c3f;
border: 1px solid #a2acb0;
}
.cat-dropdown.closed .cat-dropdown-menu {
margin-top: 0px;
}
.cat-dropdown.closed .cat-dropdown-menu .cat-item {
height: 0px;
}
.cat-dropdown.closed .title {
border-bottom: none;
}
.cat-dropdown.closed .title:after {
margin-top: -16px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.cat-dropdown .title {
width: 100%;
position: relative;
height: 40px;
padding: 12px;
cursor: pointer;
border-bottom: 1px solid #d9e1e4;
}
.cat-dropdown .title:after {
display: block;
content: "▾";
position: absolute;
right: 14px;
margin-top: -16px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.cat-dropdown .cat-dropdown-menu {
position: relative;
overflow: hidden;
max-height: 200px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
-webkit-box-sizing: "border-box";
-moz-box-sizing: "border-box";
box-sizing: "border-box";
}
.cat-dropdown .cat-list {
position: absolute;
top: 0;
width: 100%;
}
.cat-dropdown .cat-list .cat-item {
width: 100%;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #d9e1e4;
padding: 0 12px;
vertical-align: top;
overflow: hidden;
cursor: pointer;
-webkit-transition: margin-top 0.5s, height 0.5s;
-moz-transition: margin-top 0.5s, height 0.5s;
transition: margin-top 0.5s, height 0.5s;
}
.cat-dropdown .cat-list .cat-item:hover {
background-color: #d9e1e4;
color: #343c3f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cat-dropdown closed">
<div class="title">Pick user</div>
<div class="cat-dropdown-menu">
<ul class="cat-list">
<li class="cat-item" style="color:#3772b1">Henry Christensen</li>
<li class="cat-item" style="color:#4eaddc">Lamar Flynn</li>
<li class="cat-item" style="color:#ff9148">Jameson Davidson</li>
</ul>
</div>
</div>

Add .css('color', el.style.color);:
var $container = $(".cat-dropdown-menu"),
$list = $(".cat-dropdown-menu .cat-list"),
listItem = $list.find(".cat-item");
$(".cat-dropdown .title").click(function() {
if ($container.height() > 0) {
closeMenu(this);
} else {
openMenu(this);
}
});
$(".cat-dropdown-menu .cat-item").click(function() {
closeMenu(this);
});
function closeMenu(el) {
$(el)
.closest(".cat-dropdown")
.toggleClass("closed")
.find(".title")
.text($(el).text())
.css('color', el.style.color);
$container.css("height", 0);
$list.css("top", 0);
}
function openMenu(el) {
$(el)
.parent()
.toggleClass("closed");
$container.css({
height: 200
});
}
#charset "UTF-8";
/* OPTIONS */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.cat-dropdown {
text-align: left;
color: #343c3f;
border: 1px solid #a2acb0;
}
.cat-dropdown.closed .cat-dropdown-menu {
margin-top: 0px;
}
.cat-dropdown.closed .cat-dropdown-menu .cat-item {
height: 0px;
}
.cat-dropdown.closed .title {
border-bottom: none;
}
.cat-dropdown.closed .title:after {
margin-top: -16px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.cat-dropdown .title {
width: 100%;
position: relative;
height: 40px;
padding: 12px;
cursor: pointer;
border-bottom: 1px solid #d9e1e4;
}
.cat-dropdown .title:after {
display: block;
content: "▾";
position: absolute;
right: 14px;
margin-top: -16px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.cat-dropdown .cat-dropdown-menu {
position: relative;
overflow: hidden;
max-height: 200px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
-webkit-box-sizing: "border-box";
-moz-box-sizing: "border-box";
box-sizing: "border-box";
}
.cat-dropdown .cat-list {
position: absolute;
top: 0;
width: 100%;
}
.cat-dropdown .cat-list .cat-item {
width: 100%;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #d9e1e4;
padding: 0 12px;
vertical-align: top;
overflow: hidden;
cursor: pointer;
-webkit-transition: margin-top 0.5s, height 0.5s;
-moz-transition: margin-top 0.5s, height 0.5s;
transition: margin-top 0.5s, height 0.5s;
}
.cat-dropdown .cat-list .cat-item:hover {
background-color: #d9e1e4;
color: #343c3f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cat-dropdown closed">
<div class="title">Pick user</div>
<div class="cat-dropdown-menu">
<ul class="cat-list">
<li class="cat-item" style="color:#3772b1">Henry Christensen</li>
<li class="cat-item" style="color:#4eaddc">Lamar Flynn</li>
<li class="cat-item" style="color:#ff9148">Jameson Davidson</li>
</ul>
</div>
</div>

take a look at the code added in closemenu()
var $container = $(".cat-dropdown-menu"),
$list = $(".cat-dropdown-menu .cat-list"),
listItem = $list.find(".cat-item");
$(".cat-dropdown .title").click(function() {
if ($container.height() > 0) {
closeMenu(this);
} else {
openMenu(this);
}
});
$(".cat-dropdown-menu .cat-item").click(function() {
closeMenu(this);
});
function closeMenu(el) {
$(el)
.closest(".cat-dropdown")
.toggleClass("closed")
.find(".title")
.text($(el).text());
$container.css("height", 0);
document.getElementById('pick').style.color = el.style.color;
$list.css("top", 0);
}
function openMenu(el) {
$(el)
.parent()
.toggleClass("closed");
// console.log(el)
$container.css({
height: 200
});
}
#charset "UTF-8";
/* OPTIONS */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.cat-dropdown {
text-align: left;
color: #343c3f;
border: 1px solid #a2acb0;
}
.cat-dropdown.closed .cat-dropdown-menu {
margin-top: 0px;
}
.cat-dropdown.closed .cat-dropdown-menu .cat-item {
height: 0px;
}
.cat-dropdown.closed .title {
border-bottom: none;
}
.cat-dropdown.closed .title:after {
margin-top: -16px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.cat-dropdown .title {
width: 100%;
position: relative;
height: 40px;
padding: 12px;
cursor: pointer;
border-bottom: 1px solid #d9e1e4;
}
.cat-dropdown .title:after {
display: block;
content: "▾";
position: absolute;
right: 14px;
margin-top: -16px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.cat-dropdown .cat-dropdown-menu {
position: relative;
overflow: hidden;
max-height: 200px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
-webkit-box-sizing: "border-box";
-moz-box-sizing: "border-box";
box-sizing: "border-box";
}
.cat-dropdown .cat-list {
position: absolute;
top: 0;
width: 100%;
}
.cat-dropdown .cat-list .cat-item {
width: 100%;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #d9e1e4;
padding: 0 12px;
vertical-align: top;
overflow: hidden;
cursor: pointer;
-webkit-transition: margin-top 0.5s, height 0.5s;
-moz-transition: margin-top 0.5s, height 0.5s;
transition: margin-top 0.5s, height 0.5s;
}
.cat-dropdown .cat-list .cat-item:hover {
background-color: #d9e1e4;
color: #343c3f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cat-dropdown closed">
<div id='pick' class="title">Pick user</div>
<div class="cat-dropdown-menu">
<ul class="cat-list">
<li class="cat-item" style="color:#3772b1">Henry Christensen</li>
<li class="cat-item" style="color:#4eaddc">Lamar Flynn</li>
<li class="cat-item" style="color:#ff9148">Jameson Davidson</li>
</ul>
</div>
</div>

how can i animate the elements in the nav bar like this : https://riot.design/en/? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
hey there im trying to do something like the effect on the nav bar here:
https://riot.design/en/
this is the closest I got, pls help
.button_sliding_bg {
color: #31302B;
background: #FFF;
padding: 12px 17px;
margin: 25px;
font-family: 'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
box-shadow: inset 0 0 0 0 #31302B;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
.button_sliding_bg:hover {
box-shadow: inset 0 100px 0 0 #31302B;
color: #FFF;
}
<div class="button_sliding_bg">HELLOW</div>

$(".div1").on("mouseover",function(){
var $this=$(this).parent();
$this.find(".div2").slideDown("fast");
$this.find(".div1").slideUp("fast");
});
$(".div2").on("mouseleave",function(){
var $this=$(this).parent();
$this.find(".div1").slideDown("fast");
$this.find(".div2").slideUp("fast");
});
body{
background-color:#0C2663;
}
.element{
float:left;
width:65px;
margin:0 10px;
}
.element div{
width:60px;
margin-top:5px;
cursor:pointer;
padding:5px;
text-align:center;
}
.element div:last-child{
background-color:#fff;
color:#0C2663;
display:none;
}
.element div:first-child{
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">
<div class="div1">Home</div>
<div class="div2">Home</div>
</div>
<div class="element">
<div class="div1">About</div>
<div class="div2">About</div>
</div>
<div class="element">
<div class="div1">Portfolio</div>
<div class="div2">Portfolio</div>
</div>
<br>

This should work for you. The concept relies on the CSS transform: translate and transform: rotate properties to create the flipping cube effect.
Hope this helps!
body {
padding-top: 20px;
background: #0B1F5C;
color: white;
text-transform: uppercase;
font-family: sans-serif;
font-size: 20px;
-webkit-perspective: 1000px;
}
.flip-box {
-webkit-transition: -webkit-transform .5s;
transition: transform .5s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 30%;
text-align: center;
margin: 0 auto;
height: 100px;
}
.flip-box:hover {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.face1,
.face2 {
background: #0B1F5C;
border: 1px solid #0B1F5C;
height: 100px;
}
.face1 {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
.face2 {
-webkit-transform: rotateX(-90deg) translateZ(-100px);
transform: rotateX(-90deg) translateZ(-100px);
font-size: 25px;
background: white;
color: #0B1F5C;
}
<div class="flip-box">
<div class="face1">
<h1>Home</h1>
</div>
<div class="face2">
<h2>Home</h2>
</div>
</div>

i used chrome inspector on the link that you mentioned and created this for you. please ask questions that its answer could help other people too.
notice that beside the css3 transforms the trick is in
.roll span:after
that the content of data-title attribute of the hovered element will be fetched and applied to the content property:
.roll span:after {
content: attr(data-title);
}
<span data-title="Home">Home</span>
body{
background-color:grey;
}
.navbar .navbar-inner {
margin-top: 80px;
}
.navbar .nav {
float: right;
margin-right: 0;
}
.navbar .nav li {
display: inline-block;
float: none;
overflow: hidden;
transform: translate3d(0,0,0);
}
.navbar-nav>li>a {
padding-top: 13px;
padding-bottom: 7px;
}
.navbar .nav li:last-child a {
padding-right: 0;
}
.lt-ie8 .navbar .nav li {
display: block;
float: left;
}
.roll {
display: inline-block;
overflow: hidden;
z-index: 200;
position: relative;
vertical-align: top;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
}
.roll span {
display: block;
position: relative;
padding: 0 2px;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
pointer-events: none;
-webkit-pointer-events: none;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
overflow: hidden;
height: 18px;
}
a.roll:hover span {
overflow: visible;
-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.roll span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 1px;
padding: 0 2px;
color: #323C46;
background: #fff;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
<body>
<div class="navbar">
<ul id="menu-primary-navigation-en" class="nav navbar-nav">
<li class="active menu-home">
<span data-title="Home">Home</span>
</li>
<li class="menu-about">
<span data-title="About">About</span>
</li>
<li class="menu-portfolio">
<span data-title="Portfolio">Portfolio</span>
</li>
<li class="menu-contacts">
<span data-title="Contacts">Contacts</span>
</li>
</ul>
</div>
</body>

Need help to make Polygon Navigation style with transitions

Can anyone please help me to make my Polygon navigation more accurate on different browsers because it works on Chrome but looks ugly on Firefox no support for IE also. Can anyone please help me add some jQuery / css3 code to make it work in at least Chrome & Firefox. suggest some code to make it better .. Thank You !
HTML Markup :
<div id="left_rot"></div>
<div id="str"></div>
<div id="right_rot"></div>
<div id="nav">
<input type="checkbox" id="switch" name="switch" class="chkbx">
<label for="switch" class="pin"><span class="open">Open</span>
<span class="close">Close</span> Menu</label>
<span class="link1">Link1</span>
<span class="link2">Link2</span>
<span class="link3">link3</span>
<span class="link4">link4</span>
<span class="link5">link5</span>
<span class="link6">link6</span>
</div>
fiddle link for css : http://jsfiddle.net/thekiddev/d8MLQ/

I have work on your project, and changed 2 things.
I have changed your HTML, mainly to change the classes link1, link2, and so, to class link and ids link1 link2 link3.. That makes for a more compact code, since I can set shared properties for all the links.
Also, I have changed the way you position your triangles. Instead of setting positions for every one of them with top and left, I position all of them the same way. And then, I rotate them with the rotation center in the lower vertix of the triangle. That makes positioning them much easier.
The modified HTML is
<div id="nav">
<!-- Option for Opening or Closing menu -->
<input type="checkbox" id="switch" name="switch" class="chkbx">
<label for="switch" class="pin"><span class="open">Open</span><span class="close">Close</span> Menu</label>
<!-- Links -->
<span class="link" id="link1">Link1</span>
<span class="link" id="link2">Link2</span>
<span class="link" id="link3">link3</span>
<span class="link" id="link4">link4</span>
<span class="link" id="link5">link5</span>
<span class="link" id="link6">link6</span>
</div>
And the CSS is
* {
margin: 0;
padding: 0;
}
body {
background:#3498DB;
}
#nav {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 350px auto;
position: absolute;
text-align:center;
}
#left_rot {
width: 200px;
height: 350px;
position: absolute;
background: #E67E22;
top: 0;
left:0;
right:0;
bottom:0;
margin:170px auto;
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
#right_rot {
width: 200px;
height: 350px;
position: absolute;
background: #E67E22;
top:0;
left:0;
right:0;
bottom:0;
margin:170px auto;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
#str {
width: 200px;
height: 350px;
position: absolute;
background: #E67E22;
top: 0;
left:0;
right:0;
bottom:0;
margin:170px auto;
text-align: center;
}
span {
z-index:555 !important;
}
span a {
}
span a:hover {
background:rgba(0, 0, 0, .1);
box-shadow:inset 0 0 4px 0px rgba(0, 0, 0, .2);
}
.link a {
margin-left: -80px;
top:-142px;
text-decoration:none;
text-transform:uppercase;
font-weight:bold;
font-size:24px;
text-align:center;
background:transparent;
color:#fff !important;
padding: 0px;
position:absolute;
text-shadow:0 2px 1px rgba(0, 0, 0, .2);
-webkit-transition: all ease 0.50s;
transition: all ease 0.50s;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
height: 140px;
width: 162px;
}
#link2 a {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
}
#link3 a {
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
}
#link4 a {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#link5 a {
-webkit-transform: rotate(240deg);
transform: rotate(240deg);
}
#link6 a {
-webkit-transform: rotate(300deg);
transform: rotate(300deg);
}
.link a:before {
position: absolute;
content:'';
width:0;
height:0;
top:0;
left:0;
border-style:solid;
border-width: 140px 81px 0px 81px;
border-color:transparent;
border-top-color: #fff;
margin:0px;
z-index:5;
-webkit-transition: all 0.55s linear;
transition: all 0.55s linear;
}
#link2 a:before, #link4 a:before, #link6 a:before {
border-top-color: #ECF0F1;
}
.chkbx {
display: none;
margin: 0px auto;
}
.pin {
display: block;
width: 200px;
padding: 10px 25px;
font-family: century gothic;
background:rgba(252, 252, 252, 1);
position: fixed;
top: -300px;
left: 0;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 24px;
text-transform: uppercase;
text-align: center;
color: #666;
position: relative;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
.chkbx:checked ~ .pin {
color: #fff;
background: rgba(252, 252, 252, .5);
}
.chkbx:checked ~ .link a:before {
border-color: transparent !important;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
}
.close {
display: none;
}
.chkbx:checked ~ .pin span.close {
display: inline-block !important;
}
.chkbx:checked ~ .pin span.open {
display: none !important;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
footer h2, p {
font-family: century gothic;
color: #fefefe;
}
footer p a {
text-decoration: none;
font-weight: bold;
color: #1f2f3f;
}
fiddle
I have remover prefixed properties that aren't needed in modern browsers to keep the example short. It works ok in latest Chrom, Firefox and IE.

Flip of the tile

Hi I am implementing the flip of the tile once it is get zoom.
I am unable to add the css to the new class which I am adding in the jquery.
i need some help regarding this. Use Case is once you hover on the tile it will get zoom then I am adding a new class on click of the tile and I am adding css for that but it is not working. initially i need to show the front text, once I clicked on the tile then the front text should get hide and the back text to be visible and vise versa.
This is what I have tried:
HTML:
<div class="boxes">
<div class="box">
<div class="face front">
Front
</div>
<div class="face back">
Back
</div>
</div>
</div>
Css:
.boxes {
-webkit-transform: translateZ(0);
position: relative;
width: 600px;
height: 700px;
top: 0px;
}
.box {
-moz-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
-moz-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5);
-o-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5);
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
width: 140px;
height: 140px;
font-family: Helvetica, sans-serif;
text-align: center;
padding: 13px 10px;
margin: 0 5px;
background-color: #fefefe;
background: -moz-linear-gradient(90deg, #eee, #fff, #eee);
background: -webkit-gradient(linear, left top, left bottom, from(#eee),
color-stop(0.5, #fff), to(#eee) );
border: 3px solid #e1e1e1;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 15px;
cursor: pointer;
}
.box:hover {
border-color: #e1e1e1;
-webkit-box-shadow: #666 0px 0px 6px;
-moz-box-shadow: #666 0px 0px 6px;
box-shadow: #666 0px 0px 6px;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e1e1), color-stop(0.5, #fff), to(#e1e1e1));
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.flip {
-webkit-transform: rotatex(-180deg)!important;
}
.front {
z-index: 1;
cursor: pointer;
}
.back {
-webkit-transform: rotatex(-180deg);
color: black;
cursor: pointer;
}
JQuery:
$('.box').click(function(e){
alert('hai');
$(this).addClass('flip').mouseleave(function(){
$(this).removeClass('flip');
});
});
Demo Link

look at this code: DEMO
I added some class and change in your html and css:
CSS:
.box-container{
width:166px;
height:172px;
}
.box-container .box.clicked .back{
opacity:1;
}
.box-container .box.clicked .front{
opacity:0;
}
.box-container .box.clicked{
-webkit-transform:scaleY(-1);
}
.face{
transition: all 0.5s linear;
}
JQuery:
$(".box").click(function(){
$(this).toggleClass("clicked");
});

I did some modifications on your JSFiddle, see this fork: http://jsfiddle.net/u3z6Y/6/
Basically what I do is
Applying a class on the wrapper instead of the box to be able to target the flipped versions of front and back:
$('.box').click(function(e){
$('.boxes').toggleClass('flip');
// ..
});
Targeting both the flipped and the non-flipeed version from CSS:
.front {
z-index: 1;
cursor: pointer;
-webkit-transform: rotatex(0deg)!important;
}
.back {
-webkit-transform: rotatex(-180deg);
color: black;
cursor: pointer;
}
.flip .front {
-webkit-transform: rotatex(-180deg)!important;
}
.flip .back {
-webkit-transform: rotatex(0deg)!important;
}