We Keep Coding

How to move image but not its position in CSS

As you can see in the image attached, the airplane image is moving to left intentionally. But I don't want its position to move out of the alignment. I want to have something like parallax effect but on hover like this website is doing. https://digitalsilk.com/. I have just started website development.
I want to know how I can have these image transition from https://digitalsilk.com/. But I am not able to recreate that transition. I am having trouble with one thing that is moving the back airplane image a little to the left without moving its position (like a parallel effect) You can see the main page gallery of the website attached in desktop view.
<div id="outter-image">
<div class="tilt-box">
<div class="tilt-bg-image-box">
<img class="bg-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/tecnam_bg.webp" />
</div>
<img class="overlay-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/webp/Tecam_recent_mockup-min.webp" />
</div>
</div>
<style>
.overlay-image {
top: -20px;
right: -20%;
position: absolute;
width: 60%;
aspect-ratio: auto 299 /566;
height: 120%;
transition: transform .6s ease-in-out, opacity .5s;
opacity: 0;
transform: perspective(1000px) rotateY( -60deg);
}
.tilt-bg-image-box {
transition: transform .6s ease-in-out, opacity .5s, -webkit-transform .6s ease-in-out;
}
.bg-image {
transition: transform 1s .4s linear, opacity .5s, -webkit-transform 1s .4s
}
.tilt-box:hover .bg-image {
transform: translate3d(-8%, 0, 0);
}
.tilt-box:hover .overlay-image {
opacity: 1;
-webkit-transform: perspective(1000px) rotateY( -20deg);
transform: perspective(1000px) rotateY( -20deg);
}
.tilt-box:hover .tilt-bg-image-box {
transform: perspective(1000px) rotateY(20deg);
}
.tilt-box:hover .bg-image {
transition: transform 4s .4s linear, opacity .5s, -webkit-transform 4s .4s
}
</style>

The trick is to set the width to the image wrapper and overflow:hidden.
I know the picture of plane is cut of a bit. You need to scale the picture and position it a little bit different. Or change the picture itself.
When I checked your code, I would recomand you also to wrap everything to some wrapper with fixed size. It doesnt look like you expected on full screen.
<div id="outter-image">
<div class="tilt-box">
<div class="tilt-bg-image-box">
<img class="bg-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/tecnam_bg.webp" />
</div>
<img class="overlay-image" src="https://www.digitalsilk.com/wp-content/themes/digitalsilk/assets/images/seo_pages/recent-projects/webp/Tecam_recent_mockup-min.webp" />
</div>
</div>
<style>
.overlay-image {
top: -20px;
right: -20%;
position: absolute;
width: 60%;
aspect-ratio: auto 299 /566;
height: 120%;
transition: transform .6s ease-in-out, opacity .5s;
opacity: 0;
transform: perspective(1000px) rotateY( -60deg);
}
.tilt-bg-image-box {
width: 600px;
height: auto;
overflow: hidden;
transition: transform .6s ease-in-out, opacity .5s;
}
.bg-image {
transition: transform 1s .4s linear, opacity .5s;
}
.tilt-box:hover .bg-image {
transform: translate3d(-8%, 0, 0);
}
.tilt-box:hover .overlay-image {
opacity: 1;
-webkit-transform: perspective(1000px) rotateY( -20deg);
transform: perspective(1000px) rotateY( -20deg);
}
.tilt-box:hover .tilt-bg-image-box {
transform: perspective(1000px) rotateY(20deg);
}
.tilt-box:hover .bg-image {
transition: transform 4s .4s linear, opacity .5s;
}
</style>

Jquery mouseover that rearranges classes within a div then resets with mouseleave

EDIT -
The correct solution can be found here. Going off of Taplar's suggestion. I made two additional classes that duplicate the active and inactive but with !important property.
Original Post
I am new to the coding world and am going crazy trying to figure this out. I found and am trying to modify this code posted at Codepen.
On load, I would like to have .premium display as 'active' and have .standard and .platinum display as 'inactive'. Then on mouseover(), rearrange the classes so that what is being moused-over would have the 'active' class and the others 'inactive'. Lastly, when mouseleave() is triggered reset each div to the original default active and inactive.
HTML
<section class="pen">
<div class="plans">
<div class="plandis standard inactive"></div>
<div class="plandis premium active"></div>
<div class="plandis platinum inactive"></div>
</div>
</section>
CSS
.pen {
max-width: 635px;
width: 100%;
margin: 50px auto 0;
opacity: 0;
position: relative;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-animation: 1s appear 1 forwards;
-moz-animation: 1s appear 1 forwards;
-o-animation: 1s appear 1 forwards;
animation: 1s appear 1 forwards;
}
.plans {
max-width: 635px;
width: 100%;
height: 400px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis {
width: 202px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
height: inherit;
margin: 0 7px 0 0;
display: inline-block;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.plandis.active {
width: 282px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis.inactive {
width: 162px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
opacity: 0.4;
}
.plandis.premium {
background-color:red;
background-size: cover;
}
.plandis.standard {
background-color:blue;
background-size: cover;
}
.plandis.platinum {
background-color:green;
background-size: cover;
}
.plandis:last-of-type {
margin: 0;
}
#media all and (min-width: 900px) {
.pen {
max-width: 890px;
}
.plandis {
width: 286px;
}
.plandis.inactive {
width: 246px;
}
.plandis.active {
width: 366px;
}
.plans {
max-width: 890px;
height: 600px;
}
}
#media all and (max-width: 660px) {
.pen {
max-width: 335px;
}
.plandis {
width: 101px;
}
.plandis.inactive {
width: 61px;
}
.plandis.active {
width: 181px;
}
.plans {
max-width: 335px;
}
}
#-webkit-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
JS
$('.plandis').each(function() {
$(this).mouseover(function() {
$(this).addClass('active');
$('.plans').children('.plandis').not('.active').addClass('inactive');
});
$(this).mouseleave(function() {
$(this).removeClass('active');
$('.plans').children('.plandis').not('.active').removeClass('inactive');
});
});
I have tried to manipulate the code multiple times but to no avail. So hopefully someone will be able to help me out!

I went about this suggested solution slightly different. Rather than toggling the active and inactive classes, I added a third class of "ignore".
.plandis.active:not(.ignore),
.plandis.inactive:hover {
}
The css rule for active was changed to also check that the element does not have the ignore class. Also, the element should be active if it is inactive, but is hovered on.
At that point, we just have to add the ignore class to any active element that we are not currently hovering over.
var $allPlandis = $('.plandis')
.on('mouseenter', function() {
$allPlandis.not(this).filter('.active').addClass('ignore');
})
.on('mouseleave', function() {
$allPlandis.filter('.ignore').removeClass('ignore');
});
.pen {
max-width: 635px;
width: 100%;
margin: 50px auto 0;
opacity: 0;
position: relative;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-animation: 1s appear 1 forwards;
-moz-animation: 1s appear 1 forwards;
-o-animation: 1s appear 1 forwards;
animation: 1s appear 1 forwards;
}
.plans {
max-width: 635px;
width: 100%;
height: 400px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis {
width: 202px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
height: inherit;
margin: 0 7px 0 0;
display: inline-block;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.plandis.active:not(.ignore),
.plandis.inactive:hover {
width: 282px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis.inactive {
width: 162px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
opacity: 0.4;
}
.plandis.premium {
background-color: red;
background-size: cover;
}
.plandis.standard {
background-color: blue;
background-size: cover;
}
.plandis.platinum {
background-color: green;
background-size: cover;
}
.plandis:last-of-type {
margin: 0;
}
#media all and (min-width: 900px) {
.pen {
max-width: 890px;
}
.plandis {
width: 286px;
}
.plandis.inactive {
width: 246px;
}
.plandis.active {
width: 366px;
}
.plans {
max-width: 890px;
height: 600px;
}
}
#media all and (max-width: 660px) {
.pen {
max-width: 335px;
}
.plandis {
width: 101px;
}
.plandis.inactive {
width: 61px;
}
.plandis.active {
width: 181px;
}
.plans {
max-width: 335px;
}
}
#-webkit-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="pen">
<div class="plans">
<div class="plandis standard inactive"></div>
<div class="plandis premium active"></div>
<div class="plandis platinum inactive"></div>
</div>
</section>
The snippet runner here appears to work, however there is some display oddity with the CSS as it appears making the first one active and the second one inactive pushes the third one down on the page, rather than staying on the same line.

The correct solution can be found here. Going off of Taplar's suggestion. I made two additional classes that duplicate the active and inactive classes but with !important property.
HTML
$('.plandis').each(function() {
$(this).mouseover(function() {
$(this).addClass('activejq');
$('.plans').children('.plandis').not('.activejq').addClass('inactivejq');
});
$(this).mouseleave(function() {
$(this).removeClass('activejq');
$('.plans').children('.plandis').not('.activejq').removeClass('inactivejq');
});
});
body {
background: #000000;
}
.pen {
width: 100%;
margin: 50px auto 0;
opacity: 0;
position: relative;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-animation: 1s appear 1 forwards;
-moz-animation: 1s appear 1 forwards;
-o-animation: 1s appear 1 forwards;
animation: 1s appear 1 forwards;
}
.plans {
max-width: 635px;
width: 100%;
height: 400px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
height: inherit;
margin: 0 7px 0 0;
display: inline-block;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.active {
width: 282px;
opacity: 1;
}
.inactive {
width: 162px;
opacity: 0.4;
}
.inactivejq {
width: 246px !important;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
opacity: 0.4;
}
.activejq {
width: 366px !important;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
opacity: 1;
}
.plandis.premium {
background-color: red;
background-size: cover;
}
.plandis.standard {
background-color: blue;
background-size: cover;
}
.plandis.platinum {
background-color: green;
background-size: cover;
}
.plandis:last-of-type {
margin: 0;
}
#media all and (min-width: 900px) {
.pen {
max-width: 890px;
}
.plandis {
width: 286px;
}
.inactive {
width: 246px;
}
.active {
width: 366px;
}
.plans {
max-width: 890px;
height: 600px;
}
}
#media all and (max-width: 660px) {
.pen {
max-width: 335px;
}
.plandis {
width: 101px;
}
.inactive {
width: 61px;
}
.active {
width: 181px;
}
.inactivejq {
width: 61px !important;
}
.activejq {
width: 181px !important;
}
.plans {
max-width: 335px;
}
}
#-webkit-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<section class="pen">
<div class="plans">
<div class="plandis standard inactive"></div>
<div class="plandis premium active"></div>
<div class="plandis platinum inactive"></div>
</div>
</section>
</body>
</html>

How to make background links not clickable until menu is shown?

Trying to incorporate this menu concept into a friends art exhibition website but I am running into a problem with the menu links being clickable regardless of whether they are visible or not. I have been messing around with pointer-events:none; but can't quite fix the problem. I can make the links totally unclickable even when then menu is shown but that defeats the purpose. Any help would be appreciated.
A link to working demo and code can be found here
console.clear();
var app = function () {
var body = void 0;
var menu = void 0;
var menuItems = void 0;
var init = function init() {
body = document.querySelector('body');
menu = document.querySelector('.menu-icon');
menuItems = document.querySelectorAll('.nav__list-item');
applyListeners();
};
var applyListeners = function applyListeners() {
menu.addEventListener('click', function () {
return toggleClass(body, 'nav-active');
});
};
var toggleClass = function toggleClass(element, stringClass) {
if (element.classList.contains(stringClass)) element.classList.remove(stringClass);else element.classList.add(stringClass);
};
init();
}();
body {
background-color: #1e2023;
font-family: "Fira Sans", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.site-content {
max-width: 1100px;
height: 100vh;
margin-left: auto;
margin-right: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.site-content__headline {
font-weight: 200;
color: #ffffff;
font-size: calc(2vw + 10px);
}
.menu-icon {
height: 30px;
width: 30px;
position: fixed;
z-index: 2;
left: 50px;
top: 30px;
cursor: pointer;
}
.menu-icon__line {
height: 2px;
width: 30px;
display: block;
background-color: #ffffff;
margin-bottom: 4px;
-webkit-transition: background-color .5s ease, -webkit-transform .2s ease;
transition: background-color .5s ease, -webkit-transform .2s ease;
transition: transform .2s ease, background-color .5s ease;
transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
}
.menu-icon__line-left {
width: 15px;
}
.menu-icon__line-right {
width: 15px;
float: right;
}
.nav {
position: fixed;
z-index: 1;
}
.nav:before, .nav:after {
content: "";
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(234, 234, 234, 0.2);
z-index: -1;
-webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;
-webkit-transform: translateX(0%) translateY(-100%);
transform: translateX(0%) translateY(-100%);
}
.nav:after {
background: white;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.nav:before {
-webkit-transition-delay: .1s;
transition-delay: .1s;
}
.nav__content {
position: fixed;
top: 50%;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
width: 100%;
text-align: center;
font-size: calc(2vw + 10px);
font-weight: 200;
cursor: pointer;
}
.nav__list-item {
position: relative;
display: inline-block;
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
opacity: 0;
-webkit-transform: translate(0%, 100%);
transform: translate(0%, 100%);
-webkit-transition: opacity .2s ease, -webkit-transform .3s ease;
transition: opacity .2s ease, -webkit-transform .3s ease;
transition: opacity .2s ease, transform .3s ease;
transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease;
margin-right: 25px;
}
.nav__list-item:before {
content: "";
position: absolute;
background: #000000;
width: 20px;
height: 1px;
top: 100%;
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
-webkit-transition: all .3s ease;
transition: all .3s ease;
z-index: -1;
}
.nav__list-item:hover:before {
width: 100%;
}
body.nav-active .menu-icon__line {
background-color: #000;
-webkit-transform: translateX(0px) rotate(-45deg);
transform: translateX(0px) rotate(-45deg);
}
body.nav-active .menu-icon__line-left {
-webkit-transform: translateX(1px) rotate(45deg);
transform: translateX(1px) rotate(45deg);
}
body.nav-active .menu-icon__line-right {
-webkit-transform: translateX(-2px) rotate(45deg);
transform: translateX(-2px) rotate(45deg);
}
body.nav-active .nav {
visibility: visible;
}
body.nav-active .nav:before, body.nav-active .nav:after {
-webkit-transform: translateX(0%) translateY(0%);
transform: translateX(0%) translateY(0%);
}
body.nav-active .nav:after {
-webkit-transition-delay: .1s;
transition-delay: .1s;
}
body.nav-active .nav:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
body.nav-active .nav__list-item {
opacity: 1;
-webkit-transform: translateX(0%);
transform: translateX(0%);
-webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;
transition: opacity .3s ease, transform .3s ease, color .3s ease;
transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;
}
body.nav-active .nav__list-item:nth-child(0) {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
body.nav-active .nav__list-item:nth-child(1) {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
body.nav-active .nav__list-item:nth-child(2) {
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
}
body.nav-active .nav__list-item:nth-child(3) {
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}
body.nav-active .nav__list-item:nth-child(4) {
-webkit-transition-delay: 0.9s;
transition-delay: 0.9s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Projects</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="menu.css">
<script src="menu.js"></script>
</head>
<body>
<div class="menu-icon">
<span class="menu-icon__line menu-icon__line-left"></span>
<span class="menu-icon__line"></span>
<span class="menu-icon__line menu-icon__line-right"></span>
</div>
<div class="nav">
<div class="nav__content">
<ul class="nav__list">
<a href="https://stackoverflow.com/questions/1401658/html-overlay-which-allows-clicks-to-fall-through-to-elements-behind-it">
<li class="nav__list-item">Home</li></a>
<a href="https://bootsnipp.com/search?q=navigation+">
<li class="nav__list-item">About</li></a>
<li class="nav__list-item">Projects</li>
<li class="nav__list-item">Contact</li>
</ul>
</div>
</div>
<div class="site-content">
<h1 class="site-content__headline">Another menu concept</h1>
</div>
</body>
</html>

Another way to do this is toggle the display of the menu items. I edited your JS code. By using display none it effectively makes the list item elements not clickable. Then you change the display when the items are active.
const applyListeners = () => {
menu.addEventListener('click', () => toggleClass(body, 'nav-active'));
for(let i=0; i<menuItems.length; i++) {
menuItems[i].style.display="";
}
}
const init = () => {
body = document.querySelector('body');
menu = document.querySelector('.menu-icon');
menuItems = document.querySelectorAll('.nav__list-item');
for(let i=0; i<menuItems.length; i++) {
menuItems[i].style.display="none";
}
applyListeners();
}

You can achieve what you're trying to do by toggling pointer-events: none on .nav__content. I'm not sure how experienced you are with the parent selector, but it's useful in this situation.
In your SCSS
&__content{
…
pointer-events: none;
.nav-active & { // <-- parent selector
pointer-events: auto;
}
}

Why animation didn't work if I put more than 4 items in menu push left?

Was trying to put a left push menu on my site, but when I try to add more than 4 sidebar-item they just don't follow the animation. Otherwise the last item follow, so how can i fix it?
Click Run code and Full page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Left Push Menu</title>
<style>
/*#import url(https://fonts.googleapis.com/css?family=roboto); */
body, html {
height: 100%;
padding: 0;
margin: 0;
font-family: 'roboto', sans-serif;
}
h1 { text-align:center; margin:50px auto; color:#fff;}
main {
z-index: 2;
position: relative;
height: 100%;
background-color: #2D3142;
-webkit-transition: transform .7s ease-in-out;
-moz-transition: transform .7s ease-in-out;
-ms-transition: transform .7s ease-in-out;
-o-transition: transform .7s ease-in-out;
transition: transform .7s ease-in-out;
}
.sidebar {
height: 100%;
width: 400px;
position: fixed;
top: 0;
z-index: 1;
left: 0;
background-color: #000000;
}
.bar {
display: block;
height: 5px;
width: 50px;
background-color: #008e00;
margin: 10px auto;
}
.button {
cursor: pointer;
display: inline-block;
width: auto;
margin: 0 auto;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
.nav-left{
position: fixed;
left: 40px;
top: 20px;
}
.nav-right.visible-xs { z-index: 3; }
.hidden-xs { display: none; }
.middle { margin: 0 auto; }
/*nada*/
.bar {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
/*nada*/
.nav-right.visible-xs .active .bar {
background-color: #000;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
/*nada*/
.button.active .top {
-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);
}
/*nada*/
.button.active .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);
}
/*nada*/
.button.active .middle { width: 0; }
.move-to-right {
-webkit-transform: translateX(400px);
-moz-transform: translateX(400px);
-ms-transform: translateX(400px);
-o-transform: translateX(400px);
transform: translateX(400px);
}
nav { padding-top: 30px; }
.sidebar-list {
padding: 0;
margin: 0;
list-style: none;
position: relative;
margin-top: 150px;
text-align: center;
}
.sidebar-item {
margin: 30px 0;
opacity: 0;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
}
/*-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);*/
.sidebar-item:first-child {
-webkit-transition: all .7s .2s ease-in-out;
-moz-transition: all .7s .2s ease-in-out;
-ms-transition: all .7s .2s ease-in-out;
-o-transition: all .7s .2s ease-in-out;
transition: all .7s .2s ease-in-out;
}
.sidebar-item:nth-child(2) {
-webkit-transition: all .7s .4s ease-in-out;
-moz-transition: all .7s .4s ease-in-out;
-ms-transition: all .7s .4s ease-in-out;
-o-transition: all .7s .4s ease-in-out;
transition: all .7s .4s ease-in-out;
}
.sidebar-item:nth-child(3) {
-webkit-transition: all .7s .6s ease-in-out;
-moz-transition: all .7s .6s ease-in-out;
-ms-transition: all .7s .6s ease-in-out;
-o-transition: all .7s .6s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item:last-child {
-webkit-transition: all .7s .8s ease-in-out;
-moz-transition: all .7s .8s ease-in-out;
-ms-transition: all .7s .8s ease-in-out;
-o-transition: all .7s .8s ease-in-out;
transition: all .7s .6s ease-in-out;
}
.sidebar-item.active {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
.sidebar-anchor {
color: #008E00;
text-decoration: none;
font-size: 1.8em;
text-transform: uppercase;
position: relative;
padding-bottom: 7px;
}
.sidebar-anchor:before {
content: "";
width: 0;
height: 2px;
position: absolute;
bottom: 0;
right: 0;
background-color: #008e00;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.sidebar-anchor:hover:before { width: 100%; }
#media (min-width: 480px) {
.nav-list { display: block; }
}
#media (min-width: 768px) {
.nav-right { position: absolute; }
.hidden-xs { display: block; }
.visible-xs { display: none; }
}
</style>
</head>
<body>
<!--<div class="nav-left visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>-->
<!-- nav-right -->
<main>
<nav>
<div class="nav-left hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
<h1>Left Push Menu</h1>
<div class="jquery-script-ads" align="center">
</div>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Home</li>
<li class="sidebar-item">Consumption</li>
<li class="sidebar-item">Historic</li>
<li class="sidebar-item">About</li>
<li class="sidebar-item">About</li>
<li class="sidebar-item">About</li>
<li class="sidebar-item">About</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-right");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
</script>
</body>
</html>

You have just applied only for 1st,2nd, 3rd and the last element in the css styling.
.sidebar-item {
margin: 30px 0;
opacity: 0;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all .7s .2s ease-in-out;
-moz-transition: all .7s .2s ease-in-out;
-ms-transition: all .7s .2s ease-in-out;
-o-transition: all .7s .2s ease-in-out;
transition: all .7s .2s ease-in-out;
}
Just add the above remove the others

The transition styling explicitly applies to only the following "child" elements:
.sidebar-item:first-child {
/*...*/
}
.sidebar-item:nth-child(2) {
/*...*/
}
.sidebar-item:nth-child(3) {
/*...*/
}
.sidebar-item:last-child {
/*...*/
}
So if there's, say an nth-child(4), and nth-child(5), and so on then those don't have any transitions applied to them.
Add them:
.sidebar-item:nth-child(4) {
-webkit-transition: all .7s .8s ease-in-out;
-moz-transition: all .7s .8s ease-in-out;
-ms-transition: all .7s .8s ease-in-out;
-o-transition: all .7s .8s ease-in-out;
transition: all .7s .8s ease-in-out;
}
/* and so on, changing values as necessary... */

css3 transition is not smooth in safari

I'm rebuilding someone's else CSS3 transition to make it work across Safari, Chrome, and Firefox. In their version (mouse over the package images), the transition works well in Safari, but not in the other two: The elements get stuck in the "up" position. In my version, the transition runs smoothly in FF and Chrome, but is jerky in Safari (plus it's not rotating). Any ideas? My CSS is below.
.package-down {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: 0 0 0 0;
transform: rotate(0deg) ;
-webkit-transition: margin .1s ease, transform .25s ease;
-moz-transition: margin .1s ease, transform .25s ease;
-o-transition: margin .1s ease, transform .25s ease;
transition: margin .1s ease, transform .25s ease;
}
.package-up {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: -50px 0 0 0;
transform: rotate(-2deg);
-webkit-transition: margin .1s ease, transform .25s ease-out;
-moz-transition: margin .1s ease, transform .25s ease-out;
-o-transition: margin .1s ease, transform .25s ease-out;
transition: margin .1s ease, transform .25s ease-out;
}

While I agree that jQuery is not necessary for this problem, the real issue appears to be an inconsistent use of browser prefixes.
You needed to add prefixes for transform: rotate() on both .package-down and .package-up.
Also this:
-webkit-transition: margin .1s ease, transform .25s ease-out;
Should be this:
-webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;
And it would be a similar adjustment for all the other prefixed transition properties.
See Codepen
$(function() {
$('.package-down').hover(function() {
$('.package-down').toggleClass('package-up');
});
});
img {
margin: 0;
max-width: 100%;
}
.main-packages-wrapper {
position: relative;
width: 80%;
min-height: 575px;
display: block;
padding-top: 80px;
z-index: 1; }
.package.original {
margin-right: -15px;
margin-left: -15px;
z-index: 2; }
.package.original img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.package-down {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: 0 0 0 0;
-webkit-transform: rotate(0deg) ;
-moz-transform: rotate(0deg) ;
-o-transform: rotate(0deg) ;
transform: rotate(0deg) ;
-webkit-transition: margin .1s ease, -webkit-transform .25s ease;
-moz-transition: margin .1s ease, -moz-transform .25s ease;
-o-transition: margin .1s ease, -o-transform .25s ease;
transition: margin .1s ease, transform .25s ease;
}
.package-up {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: -50px 0 0 0;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;
-moz-transition: margin .1s ease, -moz-transform .25s ease-out;
-o-transition: margin .1s ease, -o-transform .25s ease-out;
transition: margin .1s ease, transform .25s ease-out;
}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<body>
<div class="primary-content">
<section class="main-packages-wrapper">
<div class="package-down multigrain">
<img src="http://www.batterworld.com/wp-content/themes/batterworld/images/package_multigrain.png">
</div>
</section>
</div><!--END PRIMARY CONTENT-->

I'm actually astonished that your jQuery hover function does work at all, because what you'd actually need is mouseenter -> addClass and mouseleave -> removeClass, but it might be me not exactly being aware of how jQuery's .hover() works.
Nonetheless, there is absolutely no need for jQuery or even Javascript to change styles on mouseover. You have the pseudo-selector :hover for exactly this purpose: Put the styles your want to transition to into
.package-down:hover { /* properties to transition to */ }
Next, do not repeat styles that the element already has and that do not change.
Last, if your problem is that not all property transition are taking an equal amount of time, don't specify so:
transition: margin .1s ease, transform .25s ease-out;
This will make the margin changes take 0.1s, but the rotation to take 0.25s.
Please describe more concisely what your transition is to look/perform like.
http://codepen.io/anon/pen/aOJmKe
Also, please be aware that you are not doing a css animation here, but a css transition. Read more about the differences here:
CSS: Animation vs. Transition

Yup, the javascript was definitely extraneous. All that was needed were CSS transitions applied to the :hover state of the elements. I did end up repeating some transition code, because that enabled the transitions to run in reverse when the cursor leaves the hovered element. Thanks! Finished codepen here.
.package.original img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
}
.package {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.33%;
z-index: 1;
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
transition: margin .15s ease-out;
}
.package:hover {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.33%;
z-index: 1;
margin: -50px 0 0 0;
-webkit-transform: rotate(-2deg);
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
transition: margin .15s ease-out;
}
.original:hover{
margin-left: -30px;
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
width: 33.33%;
z-index: 2;
}