We Keep Coding

Is there any way to achieve this functionality without JavaScript in html and css only?

Question Image
I want to achieve such zoom functionality in Html and CSS only because where I want to implement this doesn't supports JavaScript. Is this possible ?

Today all about is JS. But you can do wonderful things in CSS only and ...
Of course YOU CAN DO EXACTLY THAT in vanillaCSS
Here are TWO demonstration examples.
Louping effect on the image itself. That works in fluent layouts and mostover is the chosed solution.
The demonstration for the louping effect you asked for. That is a boxed design with a setup done in css vars. So, if you want to make it repsonsive up to now you need to define the css vars to the different breakpoints. (Head up: the loupe box has to be placed in the container as in the example and is actual shown below the original image. But you are free to position it anywhere else - i.e. by positioning it absolute/fixed/floated ... - as the html structure keeps untouched.)
Notice: more scaling up as it is needed is not a problem to both demonstrations.
html {
font-family: sans-serif;
}
/* zoomBox */
.zoomBox {
position: relative;
width: 400px;
overflow: hidden;
}
.zoomBox * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.zoomBox img {
position: relative;
width: 100%;
height: auto;
z-index: -1;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover {
position: absolute;
width: 33.333333%;
height: 33.333333%;
}
.zoomBox .hover.TL {
top: 0;
left: 0;
}
.zoomBox .hover.TL:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover.TC {
top: 0;
left: 33.333333%;
}
.zoomBox .hover.TC:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover.TR {
top: 0;
right: 0;
}
.zoomBox .hover.TR:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover.CL {
top: 33.333333%;
left: 0;
}
.zoomBox .hover.CL:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: center left;
-ms-transform-origin: center left;
transform-origin: center left;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover.CC {
top: 33.333333%;
left: 33.333333%;
}
.zoomBox .hover.CC:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover.CR {
top: 33.333333%;
right: 0;
}
.zoomBox .hover.CR:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: center right;
-ms-transform-origin: center right;
transform-origin: center right;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover.BL {
bottom: 0;
left: 0;
}
.zoomBox .hover.BL:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover.BC {
bottom: 0;
left: 33.333333%;
}
.zoomBox .hover.BC:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: bottom center;
-ms-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.zoomBox .hover.BR {
bottom: 0;
right: 0;
}
.zoomBox .hover.BR:hover ~ img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
/* imageLouping */
.imageLoupingBox {
--imageWidth: 400px;
--aspectRatio: 0.625;
--imageHeight: calc( var(--imageWidth) * var(--aspectRatio) );
--hoverWidth: calc( var(--imageWidth) * 0.33333334);
--hoverHeight: calc( var(--imageHeight) * 0.33333334);
position: relative;
}
.imageLoupingBox * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.imageLoupingBox img.imageLoupe {
position: relative;
width: var(--imageWidth);
height: var(--imageHeight);
z-index: -1;
}
.imageLoupingBox .loupeBox {
position: relative;
width: var(--imageWidth);
height: var(--imageHeight);
overflow: hidden;
border: 1px solid green;
}
.imageLoupingBox .loupeBox img {
width: 100%;
height: auto;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
opacity: 0;
-webkit-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
}
.imageLoupingBox .loupeBox:after {
content: "CSS LOUPE";
display: block;
width: 100%;
height: 12px;
text-align: center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
z-index: -2;
font-family: sans-serif;
opacity: 1;
-webkit-transition: all 0.05s;
-o-transition: all 0.05s;
transition: all 0.05s;
}
.imageLoupingBox .hover {
position: absolute;
width: var(--hoverWidth);
height: var(--hoverHeight);
}
.imageLoupingBox .hover:hover ~ .loupeBox:after {
opacity: 0;
-webkit-transition: all 0.05s;
-o-transition: all 0.05s;
transition: all 0.05s;
}
.imageLoupingBox .hover:hover ~ .loupeBox img {
opacity: 1;
-webkit-transition: all 0.1s;
-o-transition: all 0.1s;
transition: all 0.1s;
}
.imageLoupingBox .hover.TL {
top: 0;
left: 0;
}
.imageLoupingBox .hover.TL:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.imageLoupingBox .hover.TC {
top: 0;
left: var(--hoverWidth);
}
.imageLoupingBox .hover.TC:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.imageLoupingBox .hover.TR {
top: 0;
left: calc( var(--hoverWidth) * 2 );
}
.imageLoupingBox .hover.TR:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.imageLoupingBox .hover.CL {
top: var(--hoverHeight);
left: 0;
}
.imageLoupingBox .hover.CL:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: center left;
-ms-transform-origin: center left;
transform-origin: center left;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.imageLoupingBox .hover.CC {
top: var(--hoverHeight);
left: var(--hoverWidth);
}
.imageLoupingBox .hover.CC:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.imageLoupingBox .hover.CR {
top: var(--hoverHeight);
left: calc( var(--hoverWidth) * 2 );
}
.imageLoupingBox .hover.CR:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: center right;
-ms-transform-origin: center right;
transform-origin: center right;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.imageLoupingBox .hover.BL {
top: calc( var(--hoverHeight) * 2);
left: 0;
}
.imageLoupingBox .hover.BL:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.imageLoupingBox .hover.BC {
top: calc( var(--hoverHeight) * 2);
left: var(--hoverWidth);
}
.imageLoupingBox .hover.BC:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: bottom center;
-ms-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.imageLoupingBox .hover.BR {
top: calc( var(--hoverHeight) * 2);
left: calc( var(--hoverWidth) * 2 );
}
.imageLoupingBox .hover.BR:hover ~ .loupeBox img {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
<h1>ZOOMING EFFECTS vanillaCSS</h1>
<h2>Zoom box: enlarge image itself</h2>
<div class="zoomBox">
<div class="hover TL"></div>
<div class="hover TC"></div>
<div class="hover TR"></div>
<div class="hover CL"></div>
<div class="hover CC"></div>
<div class="hover CR"></div>
<div class="hover BL"></div>
<div class="hover BC"></div>
<div class="hover BR"></div>
<img src="https://source.unsplash.com/qpemSW6_1Z0">
</div>
<hr>
<h2>Image with a cssLOUPE</h2>
<div class="imageLoupingBox">
<div class="hover TL"></div>
<div class="hover TC"></div>
<div class="hover TR"></div>
<div class="hover CL"></div>
<div class="hover CC"></div>
<div class="hover CR"></div>
<div class="hover BL"></div>
<div class="hover BC"></div>
<div class="hover BR"></div>
<img class="imageLoupe" src="https://source.unsplash.com/qpemSW6_1Z0">
<div class="loupeBox">
<!--<img src="images/demoImage.jpg">-->
<img src="https://source.unsplash.com/qpemSW6_1Z0">
</div>
</div>

Because the zoom responds to a touch or mouse event and uses its position this is not possible without JS, you can however just enlarge the image on hover, also works on mobile.
img.zoomer {
transition: transform 0.3s;
}
img.zoomer:hover {
transform: scale(1.5);
}
/* css below is irrelevant */
body {
margin: 0;
}
.center {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
<div class="center">
<img class="zoomer" src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" width="300">
</div>

In order to be able to zoom on hover with an image inserted with <img> without javascript try this.
#imageZoom{
overflow:hidden;
transition: all 1s;
width:200px;
height:200px;
}
#imageZoom img:hover{
transform: scale(1.2);
}
<div id="imageZoom">
<img src="http://duncanlock.net/images/posts/better-figures-images-plugin-for-pelican/dummy-200x200.png">
</div>

Yes, you can get the detail image to show when you hover on the main image. Here's an example:
.main, .detail {
width: 200px;
height: 200px;
}
.main {
background-color: green;
}
img.detail {
display: none;
background-color: brown;
position: absolute;
top: 0;
left: 0;
}
div.container:hover img.detail {
display: block;
}
.container {
width: auto;
height: auto;
}
<div class="container">
<img class="main" src=""/>
<img class="detail" src=""/>
</div>
If you want several bits to have detail then you could have several divs which are positioned at the right places (in terms of % distance left and right of the main image) and when the user hovers over one show its related detail.

Responsive menu not opening on IE 11

Why doesn't this JS code work in IE11? Burger menu does not open. Thought the problem was onclick, tried to do it via addEventListener, it still doesn't work.
//
I tried to use Babel, it didn't change anything, added only "use strict".
//
IE11 doesn't support toggle? It says here that the second argument is not supported only.
//
Can you tell me how to get the code to work?
document.querySelector(".animated-icon2").onclick = function (e) {
e.preventDefault();
this.classList.toggle("open");
document.querySelector(".sidebar-main").classList.toggle("show");
};
.sidebar-main{
display:none;
}
.sidebar-main.show{
display: block;
}
.mobile-menu{
position: absolute;
background-color: transparent;
border: none;
outline: 0;
top: 25px;
right: 50%;
display: block;
z-index: 7;
}
/*animated icon*/
.animated-icon2 {
width: 30px;
height: 20px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon2 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.animated-icon2 span {
background: #000;
}
.animated-icon2 span:nth-child(1) {
top: 0px;
}
.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
top: 10px;
}
.animated-icon2 span:nth-child(4) {
top: 20px;
}
.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}
.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}
<header>
<button class="mobile-menu"><div class="animated-icon2"><span></span><span></span><span></span><span></span></div></button>
<div class="sidebar-main">
<h1>Header</h1>
</div>
</header>

The following JS code works for IE11.
The onclick event is executed for the button element in your HTML structure in IE11.
document.querySelector(".mobile-menu").onclick = function (e) {
e.preventDefault();
document.querySelector(".animated-icon2").classList.toggle("open");
document.querySelector(".sidebar-main").classList.toggle("show");
};
.sidebar-main{
display:none;
}
.sidebar-main.show{
display: block;
}
.mobile-menu{
position: absolute;
background-color: transparent;
border: none;
outline: 0;
top: 25px;
right: 50%;
display: block;
z-index: 7;
}
/*animated icon*/
.animated-icon2 {
width: 30px;
height: 20px;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.animated-icon2 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
.animated-icon2 span {
background: #000;
}
.animated-icon2 span:nth-child(1) {
top: 0px;
}
.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
top: 10px;
}
.animated-icon2 span:nth-child(4) {
top: 20px;
}
.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}
.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}
<header>
<button class="mobile-menu"><div class="animated-icon2"><span></span><span></span><span></span><span></span></div></button>
<div class="sidebar-main">
<h1>Header</h1>
</div>
</header>

This might work:
Add this to the top of the HTML file.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Your page may be forced to an IE compatibility mode for some reason, which makes it behave like an old version of IE. Adding the meta tag forces it back into IE11 mode.

Toggle Element Colour Based on Background Colour in JS

I've written some JavaScript code that almost works the way I want it to, but I need some help figuring out how to make it work the way I need it to.
I want to change the colour of a fixed navigation element (hamburger) when it encounters a section with the class of white.Right now this is accomplished by adding a class of darker to that nav element.
What I can't figure out is how to have the darker class removed when I scroll past an element that no longer has the class of white. Any help is much appreciated!
Thanks in advance! :)
Code pen demo
The code is as follows: (Maybe not showing as expected here in SO, better in Codepen)
$(document).ready(function(){
$('#hamburger').click(function(){
$(this).toggleClass('open');
});
});
$(document).ready(function () {
var change = $('.change');
$(window).scroll(function () {
var y = $(this).scrollTop();
var z = $('.white').offset().top;
if (y >= z) {
change.addClass('darker');
}
else {
change.removeClass('darker');
}
});
});
//Variables
$grey-darker: hsl(0, 0%, 21%);
$grey: hsl(0, 0%, 48%);
$white: hsl(0, 0%, 100%);
$bold: 900;
//Formatting
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
letter-spacing: -1.5px;
}
h1 {
color: $white;
font-size: 7em;
font-weight: $bold;
}
//Navigation/
.navigation {
display:flex;
vertical-align:top;
width: 100%;
height: 76px;
position: fixed;
}
//Hamburger --> This should change from white & blue depending on background color
#hamburger {
width: 30px;
height: 20px;
margin-left: auto;
align-self: center;
margin-right: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out, ;
transition-delay: background 0.4s;
cursor: pointer;
z-index: 5;
}
#hamburger span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: $white;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out, ;
transition-delay: background 0.4s;
}
#hamburger span.change.darker{
background: Blue;
}
#hamburger span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#hamburger span:nth-child(2) {
top: 6px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#hamburger span:nth-child(3) {
top: 12px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#hamburger.open span:nth-child(1) {
background:white;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 5px;
}
#hamburger.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#hamburger.open span:nth-child(3) {
background:white;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 22px;
left: 5px;
}
//Main
.container-fullpage {
display: flex;
flex-direction: row;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
height: 100vh;
width: 100vw;
}
.sectionOne {
background: blue;
}
.sectionTwo{
color: blue;
background: $white;
}
.sectionTwo h1 {
color: blue;
}
.sectionThree{
background: blue;
}
.sectionFour{
background: $white;
}
.sectionFour h1 {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<nav class="navigation">
<div class="hamburger" id="hamburger">
<span class="change"></span>
<span class="change"></span>
<span class="change"></span>
</div>
</nav>
</header>
<main>
<div class="container-fullpage sectionOne">
<h1 class="home">First Section</h1>
</div>
<div class="container-fullpage sectionTwo white">
<h1>Second Section</h1>
</div>
<div class="container-fullpage sectionThree">
<h1>Third Section</h1>
</div>
<div class="container-fullpage sectionFour white">
<h1>Fourth Section</h1>
</div>
</main>

I think this is the javascript code that will do what you want:
$(document).ready(function(){
$('#hamburger').click(function(){
$(this).toggleClass('open');
});
});
$(document).ready(function () {
var change = $('.change');
$(window).scroll(function () {
var top1 = change.offset().top;
var bottom1 = change.offset().top + change.outerHeight(true);
var overlapsWhite = false;
$('.white').each(function() {
var top2 = $(this).offset().top;
var bottom2 = $(this).offset().top + $(this).outerHeight(true);
if (top1 >= top2 && bottom2 >= bottom1){
overlapsWhite = true;
return false;
}
});
if (overlapsWhite) {
change.addClass('darker');
}
else {
change.removeClass('darker');
}
});
});
Check on Code pen

Apply CSS animation class for many instance in one page

I try to make share button for social media with animated button in CSS. But I want some button to display in one page. For different content. But I found this didn't work for second button. If the second button is clicked, the first button that animated instead of second. My Question is how to make the CSS applied to every button in my page?
This is the fiddle :
https://jsfiddle.net/2s6w4hq7/
This is my HTML :
<title>Profill</title>
<br>
<br>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>
and this is the CSS :
/*
Using FontAwesome for icons
https://fortawesome.github.io/Font-Awesome/
*/
.share-button {
position: relative;
width: 50px;
margin: 5px;
}
.toggle {
position: relative;
width: 50px;
height: 50px;
z-index: 10;
display: block;
cursor: pointer;
color: #fff;
background-color: #3D3D3D;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 50%;
}
.toggle:hover {
background-color: #0a0a0a;
}
.toggle:after {
position: relative;
display: block;
width: 50px;
height: 50px;
font-family: 'FontAwesome';
content: "\f1e0";
line-height: 50px;
font-size: 29px;
text-align: center;
left: -2px;
}
.toggle-input {
display: none;
}
.toggle-input:checked + .toggle:after, .toggle-input:checked + .toggle:before {
background-color: #fff;
content: "";
height: 3px;
width: 30px;
position: absolute;
left: 10px;
top: 23px;
}
.toggle-input:checked + .toggle:after {
-webkit-animation: bar1 0.3s forwards;
animation: bar1 0.3s forwards;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.toggle-input:checked + .toggle:before {
-webkit-animation: bar2 0.3s forwards;
animation: bar2 0.3s forwards;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.network-list li {
position: absolute;
display: block;
width: 50px;
height: 50px;
margin: 0;
padding: 0;
list-style-type: none;
opacity: 0;
}
.network-list .twitter {
left: 50px;
top: -50px;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(500px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
}
.network-list .facebook {
left: 50px;
top: 0;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease 0.3s;
transition: all 0.15s ease 0.3s;
}
.network-list .googleplus {
left: 50px;
top: 50px;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.15s ease 0.15s;
transition: all 0.15s ease 0.15s;
}
.network-list a {
color: #fff;
position: relative;
display: block;
width: 50px;
height: 50px;
overflow: hidden;
line-height: 50px;
text-indent: 120%;
text-decoration: none;
}
.network-list a:before {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
width: 50px;
height: 50px;
font-family: 'FontAwesome';
font-size: 26px;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 50px;
text-indent: 0;
}
.network-list .twitter a {
background-color: #00C3F3;
border-radius: 50%;
}
.network-list .twitter a:before {
content: "\f099";
}
.network-list .twitter a:hover:before {
box-shadow: inset 0 0 0 2px #00C3F3;
}
.network-list .facebook a {
background-color: #2C609B;
border-radius: 50%;
}
.network-list .facebook a:before {
content: "\f09a";
}
.network-list .facebook a:hover:before {
box-shadow: inset 0 0 0 2px #2C609B;
}
.network-list .googleplus a {
background-color: #EC3F25;
border-radius: 50%;
}
.network-list .googleplus a:before {
content: "\f0d5";
}
.network-list .googleplus a:hover:before {
box-shadow: inset 0 0 0 2px #EC3F25;
}
input:checked ~ .network-list li {
opacity: 1;
top: 0;
}
input:checked ~ .network-list .twitter {
left: 50px;
top: -50px;
-webkit-transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.4s;
transition: all 0.25s ease 0.4s;
}
input:checked ~ .network-list .facebook {
left: 50px;
top: 0;
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(0) rotateZ(0deg);
transform: perspective(500px) rotateX(0deg) rotateY(0) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.2s;
transition: all 0.25s ease 0.2s;
}
input:checked ~ .network-list .googleplus {
left: 50px;
top: 50px;
-webkit-transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
transform: perspective(500px) rotateX(0) rotateY(0deg) rotateZ(0deg);
-webkit-transition: all 0.25s ease 0.6s;
transition: all 0.25s ease 0.6s;
}
#-webkit-keyframes bar1 {
0% {
content: "\f1e0";
width: 46px;
height: 50px;
background-color: transparent;
-webkit-transform: scale(1);
transform: scale(1);
top: 0;
left: 0;
opacity: 1;
}
50% {
background-color: transparent;
content: "\f1e0";
width: 46px;
height: 50px;
top: 0;
left: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2);
opacity: 0;
}
50.001% {
background-color: #fff;
left: 10px;
top: 22px;
content: "";
height: 3px;
width: 30px;
-webkit-transform: rotate(45deg), scale(0.2);
transform: rotate(45deg), scale(0.2);
}
100% {
-webkit-transform: rotate(45deg), scale(1);
transform: rotate(45deg), scale(1);
opacity: 1;
}
}
#keyframes bar1 {
0% {
content: "\f1e0";
width: 46px;
height: 50px;
background-color: transparent;
-webkit-transform: scale(1);
transform: scale(1);
top: 0;
left: 0;
opacity: 1;
}
50% {
background-color: transparent;
content: "\f1e0";
width: 46px;
height: 50px;
top: 0;
left: 0;
-webkit-transform: scale(0.2);
transform: scale(0.2);
opacity: 0;
}
50.001% {
background-color: #fff;
left: 10px;
top: 22px;
content: "";
height: 3px;
width: 30px;
-webkit-transform: rotate(45deg), scale(0.2);
transform: rotate(45deg), scale(0.2);
}
100% {
-webkit-transform: rotate(45deg), scale(1);
transform: rotate(45deg), scale(1);
opacity: 1;
}
}
#-webkit-keyframes bar2 {
0% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50.1% {
background-color: transparent;
-webkit-transform: rotate(-45deg) scale(0.2);
transform: rotate(-45deg) scale(0.2);
opacity: 0;
}
100% {
-webkit-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
opacity: 1;
}
}
#keyframes bar2 {
0% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50% {
background-color: transparent;
-webkit-transform: 0 scale(0.2);
transform: 0 scale(0.2);
opacity: 0;
}
50.1% {
background-color: transparent;
-webkit-transform: rotate(-45deg) scale(0.2);
transform: rotate(-45deg) scale(0.2);
opacity: 0;
}
100% {
-webkit-transform: rotate(-45deg) scale(1);
transform: rotate(-45deg) scale(1);
opacity: 1;
}
}

You need to use different id for each button and match the <label>'s for attribute to that same id:
For example:
https://jsfiddle.net/2s6w4hq7/1/
<input class="toggle-input" id="toggle-input-1" type="checkbox" />
<label for="toggle-input-1" class="toggle"></label>
<input class="toggle-input" id="toggle-input-2" type="checkbox" />
<label for="toggle-input-2" class="toggle"></label>

this is simple. you just change your id name of the input and call same name in label.
ie.
<input class="toggle-input" id="toggle-input1" type="checkbox" />
<label for="toggle-input1" class="toggle"></label>
change your code with above code.

You just need to define different ID's for Checkbox and label under div of class share-button.
Please refer below code:
<title>Profill</title>
<br>
<br>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input" type="checkbox" />
<label for="toggle-input" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>
<br>
<br>
<div class="share">
<div class="share-button">
<input class="toggle-input" id="toggle-input1" type="checkbox" />
<label for="toggle-input1" class="toggle"></label>
<ul class="network-list">
<li class="twitter">
Share on Twitter
</li>
<li class="facebook">
Share on Facebook
</li>
<li class="googleplus">
Share on Google+
</li>
</ul>
</div>
</div>

Javascript/jQuery event handler isn't loading

I have a problem using jQuery where the blocks of code inside $(document).ready() won't load. I have looked into it and haven't been able to find a solution. I looked at it with the chrome "inspect element" tool thing in the Event Listeners tab there is nothing for the object that has an event linked to it.
I'm using brackets and Jslint gives me the error: "$ was used before it was defined" for the first line of code. Here is my HTML code and Js/jQuery code:
HTML
<head>
<script type="text/javascript" src="JS/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="JS/Java.js"></script>
<style>
#login{
display:;
font-size: 18;
left: 80%;
top: 28%;
}
#login:hover{
opacity: 0.4;
cursor: pointer;
}
#nav-icon{
width: 20px;
height: 15px;
position: relative;
top: 30%;
left: 90%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span{
display: block;
position: relative;
height: 1px;
width: 100%;
background: #ffffff;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2) {
top: 6px;
}
#nav-icon span:nth-child(3) {
top: 12px;
}
#nav-icon.open span:nth-child(1) {
top: 4.5px;
left: 100;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon.open span:nth-child(3) {
top: 3px;
left: 100;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#menubar{
display:;
position: absolute;
top: 0;
height: 100%;
width: 15%;
left: 50%;
background-color: rgba(0, 0, 0, 0.85);
z-index: 2;
font-family: main;
font-size: 20;
color: fff;
list-style: none;
line-height: 2;
}
</style>
</head>
<body>
<div id="HeaderContainer">
<div class=header id="login">
<li>Login</li>
</div>
<div id="nav-icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="menubar">
<li>Login</li>
<li>My Account</li>
<li>My Wishlist</li>
<li>My Orders</li>
</div>
</body>
Js/jQuery
$(document).ready(function () {
$('#nav-icon').click(function () {
$(this).toggleClass('open');
$('#menubar').animate({left: 'toggle'}, -30%);
$('#login').fadeToggle(fast);
});
});
The HTML and JS are in separate files and I know that both JS files are correctly linked to the HTML file. alert() placed on the first line before any other code works.
What I want to happen:
I want the hamburger menu (#nav-icon) to, when clicked, toggle the CSS class "open".
When I click it right now nothing happens.
Thanks in advance for any help you can offer!
PS: I'm new here so sorry if I messed anything up.

, -30% not appear to be valid duration at $('#menubar').animate({left: 'toggle'}, -30%); ?
$(document).ready(function () {
$('#nav-icon').click(function () {
$(this).toggleClass('open');
$('#menubar').animate({left: 'toggle'}, 1000);
$('#login').fadeToggle("fast");
});
});
#login {
display: ;
font-size: 18;
left: 80%;
top: 28%;
}
#login:hover {
opacity: 0.4;
cursor: pointer;
}
#nav-icon {
width: 20px;
height: 15px;
position: relative;
top: 30%;
left: 90%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
#nav-icon span {
display: block;
position: relative;
height: 1px;
width: 100%;
background: #ffffff;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2) {
top: 6px;
}
#nav-icon span:nth-child(3) {
top: 12px;
}
#nav-icon.open span:nth-child(1) {
top: 4.5px;
left: 100;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#nav-icon.open span:nth-child(2) {
opacity: 0;
left: -60px;
}
#nav-icon.open span:nth-child(3) {
top: 3px;
left: 100;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#menubar {
display: ;
position: absolute;
top: 0;
height: 100%;
width: 15%;
left: 50%;
background-color: rgba(0, 0, 0, 0.85);
z-index: 2;
font-family: main;
font-size: 20;
color: fff;
list-style: none;
line-height: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="HeaderContainer">
<div class=header id="login">
<li>Login</li>
</div>
<div id="nav-icon">
<span>a</span>
<span>b</span>
<span>c</span>
</div>
</div>
<div id="menubar">
<li>Login</li>
<li>My Account</li>
<li>My Wishlist</li>
<li>My Orders</li>
</div>

this line is wrong.
$('#login').fadeToggle(fast);
there no such thing like fast in jQuery Correct way is something like this :
$('#login').fadeToggle('fast');
you have to use fast as string.