We Keep Coding

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 get a callback for css3 transition end?

I am trying the following but I get no callback at all
$("#panel").addClass("showPane");
$("#close_wikipedia").on("click", function() {
$("#panel").addClass("close_wiki");
});
if ($("#panel").hasClass("close_wiki")) {
$(this).bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
$("#panel").removeClass("close_wiki showPane");
});
}
#panel {
position: fixed;
background: #444;
height: 100%;
width: 50vw;
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
z-index: 9999;
top: 0;
bottom: 0;
height: 100vh;
overflow-y: auto;
}
#panel.showPane {
right: 0;
}
#panel.close_wiki {
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">
<h2>Wikipedia results</h2>
<div class="panel-group" id="accordionWiki" role="tablist" aria-multiselectable="true"></div>
<button id="close_wikipedia" type="button" class="btn btn-danger">Close Wiki</button>
</div>

The issue is because you only check if #panel has the close_wiki class when the pages loads - which will never fire as it's added on button click.
Instead hook the transitionEnded event onload and wait for it to fire after the CSS transition completes. Also note that bind() is deprecated. You should use on() instead. Try this:
$("#close_wikipedia").on("click", function() {
$("#panel").removeClass("showPane");
});
#panel {
position: fixed;
background: #444;
height: 100%;
width: 50vw;
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
z-index: 9999;
top: 0;
bottom: 0;
height: 100vh;
overflow-y: auto;
}
#panel.showPane {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel" class="showPane">
<h2>Wikipedia results</h2>
<div class="panel-group" id="accordionWiki" role="tablist" aria-multiselectable="true"></div>
<button id="close_wikipedia" type="button" class="btn btn-danger">Close Wiki</button>
</div>
Also note that you can make the logic much simpler (and remove the need to hook to transitionEnded at all by just toggling the showPane class on the #Panel element.
$('#panel').addClass('showPane');
$("#close_wikipedia").on("click", function() {
$("#panel").removeClass("showPane");
});
#panel {
position: fixed;
background: #444;
height: 100%;
width: 50vw;
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
z-index: 9999;
top: 0;
bottom: 0;
height: 100vh;
overflow-y: auto;
}
#panel.showPane {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">
<h2>Wikipedia results</h2>
<div class="panel-group" id="accordionWiki" role="tablist" aria-multiselectable="true"></div>
<button id="close_wikipedia" type="button" class="btn btn-danger">Close Wiki</button>
</div>

You need to not chekc for the close_wiki class on page load and bind event based on it. Since this class is added dynamically on the close_wikipedia click. you can use event delegation to achieve the call back of transition event when close_wiki is clicked.
$("#panel").addClass("showPane");
$("#close_wikipedia").on("click", function() {
$("#panel").addClass("close_wiki");
});
$(document).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",".close_wiki", function() {
alert("called");
$("#panel").removeClass("close_wiki showPane");
});
#panel {
position: fixed;
background: #444;
height: 100%;
width: 50vw;
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
z-index: 9999;
top: 0;
bottom: 0;
height: 100vh;
overflow-y: auto;
}
#panel.showPane {
right: 0;
}
#panel.close_wiki {
right: -100vw;
transition: right 0.4s ease-in-out;
-o-transition: right 0.4s ease-in-out;
-ms-transition: right 0.4s ease-in-out;
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">
<h2>Wikipedia results</h2>
<div class="panel-group" id="accordionWiki" role="tablist" aria-multiselectable="true"></div>
<button id="close_wikipedia" type="button" class="btn btn-danger">Close Wiki</button>
</div>

Transition on :hover:before not working properly

Basically what I'm trying to do is have a transition with transform applied on the :hover:before element so that when you hover with your mouse over ava.png the :before element smoothly appears instead of instantly.
I've tried adding the transition code to the :hover:after class (as seen in the code below) and I tried one of the solutions I found on StackOverflow, changing :hover to :before and adding the content + transition to that class. Needless to say none of my attempts worked or I wouldn't be here right now. (:D)
If anyone could take the time to help me out that'd be highly appreciated, thanks!
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
width: 98px;
height: 92px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:hover:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
z-index: -1;
position: absolute;
margin-left: -150px;
margin-top: -50px;
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#slide2 {
position: relative;
margin-left: 0px;
margin-top: 0px;
z-index: 100;
width: 140px;
height: 160px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}
<div class="inner">
<a id="slide1" href="/insider-informatie/over-mij.html"></a>
<div id="slide2"></div>
<h1>Header 1</h1>
<p>My text</p>
</div>

To animate transition you need a to have some kind of a change in the elements properties. This means that the element should be part of the page, displayed (ie no display: none) and visible (no visibility: hidden), but somehow invisible / transparent (opacity: 0 for example).
In your case, you don't create the :before element unless you want to display it. To solve that render the :before with scale(0), and on over change it to scale(1):
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
width: 98px;
height: 92px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
z-index: -1;
position: absolute;
margin-left: -150px;
margin-top: -50px;
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
#slide1:hover:before {
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#slide2 {
position: relative;
margin-left: 0px;
margin-top: 0px;
z-index: 100;
width: 140px;
height: 160px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}
<div class="inner">
<a id="slide1" href="/insider-informatie/over-mij.html"></a>
<div id="slide2"></div>
<h1>Header 1</h1>
<p>My text</p>
</div>

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... */

Hover effect is under the image

So I'm struggling with hover effect. The black box is the image and I want the red mask color (which has the same width and height) to be placed in front of the black box whenever user will hover on that image, I cannot do this because it seems the effect is under the image whenever I hover mouse on that image....
.third-effect .mask {
opacity: 0;
overflow: visible;
border: 100px solid rgba(0, 0, 0, 0.7);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width: 274px;
height: 197px;
}
.third-effect a.info {
position: relative;
top: -10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out;
}
.third-effect:hover .mask {
opacity: 1;
border: 100px solid rgba(0, 0, 0, 0.7);
}
.third-effect:hover a.info {
opacity: 1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<section class="module content">
<div class="view third-effect">
<img src="images/chronos.png" />
<div class="mask">
Full Image
</div>
</div>
</div>
</div>

In your css, you can use the :hover selector to modify the style of your element when your mouse hovers it.
Take a look at this example to see how you can use it.
http://jsfiddle.net/wof159fh/

.third-effect .mask {
opacity: 0;
overflow:visible;
border:100px solid rgba(0,0,0,0.7);
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
width:274px;
height:197px;
}
.third-effect a.info {
position:relative;
top:-10px;
opacity: 0;
-webkit-transition: opacity 0.5s 0s ease-in-out;
-moz-transition: opacity 0.5s 0s ease-in-out;
-o-transition: opacity 0.5s 0s ease-in-out;
-ms-transition: opacity 0.5s 0s ease-in-out;
transition: opacity 0.5s 0s ease-in-out; }
.third-effect:hover .mask {
opacity: 1;
border:100px solid rgba(0,0,0,0.7);
}
.third-effect:hover a.info {
opacity:1;
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<section class="module content">
<div class="view third-effect">
<img src="images/chronos.png" >
<div class="mask">
Full Image
</div>
</div>
</div>
</div>

You can do it this way
#image {
background-image: url('http://lorempixel.com/400/200/');
width: 300px;
background-size: cover;
height: 300px;
}
#image:hover {
background-color: red;
background-image: none;
}
<div id="image"></div>

Im not sure if you want the overlaid div to be clickable or what. You can use javascript to set stuff up. So you can add a transparent color to the "hover" which would mask it in some color. ex: set opacity 0.8 with red.
Also there is the approach i did. http://jsfiddle.net/kv0fsLs2/
<div id="outer">
<div id="image"></div>
<div id="hover"></div>
</div>
#image {
background-color:red;
}
#hover {
position:absolute;
background-color: blue;
}
div > div {
width: 100px;
height: 100px;
top: 0px;
left: 0px;
}
#outer {
position:relative;
left: 250px;
top: 250px;
}
this way you can tie a click handler to the overlaid div, if you didnt want to do it to the actual item.
Edit: Here you can see it using opacity.... http://jsfiddle.net/kv0fsLs2/1/ All you would need to do is have the image be there instead of a red background as i did in the simplest of examples.
Edit 2: Here is another fiddle, actually using an image: http://jsfiddle.net/kv0fsLs2/2/