Develop Reference

I want to call multiple hover effect when i hover on a div

I want to call multiple hover effects when I hover on the div=class"component". Right now only individual characters are effected -- here is the jsfiddle link https://jsfiddle.net/ogrwm1zg/
<div class="container">
<div class="component">
<a href="/somelink">
<ul class="grid-see">
<li class="ot-letter-top"><span data-letter="S">S</span></li>
<li class="ot-letter-right"><span data-letter="E">E</span></li>
<li class="ot-letter-right"><span data-letter="E">E</span></li>
<li ><span class="blank-spaces" ></span></li>
</ul>
<ul class="grid-our">
<li class="ot-letter-left"><span data-letter="O">O</span></li>
<li class="ot-letter-left"><span data-letter="U">U</span></li>
<li class="ot-letter-left"><span data-letter="R">R</span></li>
<li ><span class="blank-spaces" ></span></li>
</ul>
<ul class="grid-work">
<li class="ot-letter-left"><span data-letter="W">W</span></li>
<li class="ot-letter-left"><span data-letter="O">O</span></li>
<li class="ot-letter-left"><span data-letter="R">R</span></li>
<li class="ot-letter-top"><span data-letter="K">K</span></li>
</ul>
</a>
</div>
</div>

See this working fiddle. I also removed alot of redundant CSS.
Replace your :hover CSS to affect the container instead of single elements.
E.g. replace the selector:
.ot-letter-top:hover span:after
With this one:
.component:hover .ot-letter-top span:after
.body {
background: white;
}
/* grid */
.grid {
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.grid li {
position: relative;
float: left;
max-height: 290px;
text-align: center;
padding-right: 10px;
}
/* Common styles for the letters */
.grid li span {
display: inline-block;
font-weight: 900;
line-height: 1;
position: relative;
color: #14b9f1;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 550px;
-ms-perspective: 550px;
perspective: 550px;
z-index: 1;
font-size: 90px;
}
.component li span:before,
.component li span:after {
position: absolute;
content: attr(data-letter);
line-height: inherit;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
-webkit-transition: all .3s;
transition: all .3s;
}
.component li span:before {
text-shadow: none;
color: hsla(0, 0%, 0%, 0.12);
}
/* Colors */
.ot-letter-left, .ot-letter-right {
background: #FFF;
}
.ot-letter-left span:after,
.ot-letter-right span:after,
.ot-letter-top span:after,
.ot-letter-bottom span:after {
color: #FFF;
}
.ot-letter-bottom {
background: #e95949;
}
/* Left */
.ot-letter-left span:before,
.ot-letter-left span:after,
.ot-letter-right span:before,
.ot-letter-right span:after {
-webkit-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
}
.ot-letter-left span:before,
.ot-letter-right span:before {
-webkit-transform: scale(1.08, 1) skew(0deg, 1deg);
-ms-transform: scale(1.08, 1) skew(0deg, 1deg);
transform: scale(1.08, 1) skew(0deg, 1deg);
}
.ot-letter-left span:after,
.ot-letter-right span:after {
text-shadow: -1px 0px 0px hsla(360, 100%, 100%, 0.1), 3px 0px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateY(-15deg);
-ms-transform: rotateY(-15deg);
transform: rotateY(-15deg);
}
.component:hover .ot-letter-left span:before,
.component:hover .ot-letter-right span:before {
-webkit-transform: scale(0.85, 1) skew(0deg, 20deg);
-ms-transform: scale(0.85, 1) skew(0deg, 20deg);
transform: scale(0.85, 1) skew(0deg, 20deg);
}
.component:hover .ot-letter-left span:after,
.component:hover .ot-letter-right span:after {
-webkit-transform: rotateY(-40deg);
-ms-transform: rotateY(-40deg);
transform: rotateY(-40deg);
}
/* Up */
.ot-letter-top span:before,
.ot-letter-top span:after {
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.ot-letter-top span:before {
-webkit-transform: scale(1, 0.95) skew(-4deg, 0deg);
-ms-transform: scale(1, 0.95) skew(-4deg, 0deg);
transform: scale(1, 0.95) skew(-4deg, 0deg);
}
.ot-letter-top span:after {
text-shadow: 0px 1px 0px hsla(360, 100%, 100%, 0.1), 0px -3px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateX(-15deg);
-ms-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
.ot-letter-top:hover span:before {
-webkit-transform: translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg);
-ms-transform: translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg);
transform: translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg);
}
.component:hover .ot-letter-top span:after {
-webkit-transform: translateY(-0.035em) rotateX(-40deg);
-ms-transform: translateY(-0.035em) rotateX(-40deg);
transform: translateY(-0.035em) rotateX(-40deg);
}
/* Down */
.ot-letter-bottom span:before,
.ot-letter-bottom span:after {
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
}
.ot-letter-bottom span:before {
-webkit-transform: scale(1, 1.05) skew(4deg, 0deg);
-ms-transform: scale(1, 1.05) skew(4deg, 0deg);
transform: scale(1, 1.05) skew(4deg, 0deg);
}
.ot-letter-bottom span:after {
text-shadow: 0px -1px 0px hsla(360, 100%, 100%, 0.1), 0px 3px 1px hsla(0, 0%, 0%, 0.4);
-webkit-transform: rotateX(15deg);
-ms-transform: rotateX(15deg);
transform: rotateX(15deg);
}
.component:hover .ot-letter-bottom span:before {
-webkit-transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
-ms-transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
transform: translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg);
}
.component:hover .ot-letter-bottom span:after {
-webkit-transform: translateY(0.045em) rotateX(40deg);
-ms-transform: translateY(0.045em) rotateX(40deg);
transform: translateY(0.045em) rotateX(40deg);
}
/* Example for media query: change number of items per row */
.blank-spaces {
width: 20px;
}
<body>
<div class="container">
<div class="component">
<a href="/somelink">
<ul class="grid">
<li class="ot-letter-top"><span data-letter="S">S</span></li>
<li class="ot-letter-right"><span data-letter="E">E</span></li>
<li class="ot-letter-right"><span data-letter="E">E</span></li>
<li><span class="blank-spaces"></span></li>
</ul>
<ul class="grid">
<li class="ot-letter-left"><span data-letter="O">O</span></li>
<li class="ot-letter-left"><span data-letter="U">U</span></li>
<li class="ot-letter-left"><span data-letter="R">R</span></li>
<li><span class="blank-spaces"></span></li>
</ul>
<ul class="grid">
<li class="ot-letter-left"><span data-letter="W">W</span></li>
<li class="ot-letter-left"><span data-letter="O">O</span></li>
<li class="ot-letter-left"><span data-letter="R">R</span></li>
<li class="ot-letter-top"><span data-letter="K">K</span></li>
</ul>
</a>
</div>
</div>
<!-- /container -->

Trigger click on one anchor when another is clicked

When I click on the link, I would like the link to be also clicked. However, nothing happens with my code, see fiddle.
HTML:
<section class="space_between">
<h3 class="center_rounded_ol">Man-to-man suggestions</h3>
<ol class="rounded-list center_rounded_ol">
<li>
Name Surname
</li>
</ol>
</section>
<nav class="nav-fillpath">
<a class="next" onClick="load()">
<span class="icon-wrap"></span>
<h3><strong>Alexis</strong> Tsipras</h3>
</a>
</nav>
JavaScript:
function load() {
$("#foo").tigger('click');
}
function burn() {
$(this).css("color", "red");
}

I personally prefer writing it this way: JS Fiddle
$('.next').on('click', function() {
$("#foo").trigger('click');
});
$('#foo').on('click', function() {
$(this).css("color", "red");
});
$('.next').on('click', function() {
$("#foo").trigger('click');
});
$('#foo').on('click', function() {
$(this).css("color", "red");
});
nav a {
position: absolute;
top: 50%;
display: block;
outline: none;
text-align: left;
z-index: 1000;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
nav a.prev {
left: 0;
}
nav a.next {
right: 0;
}
nav a svg {
display: block;
margin: 0 auto;
padding: 0;
}
/*--------------------*/
/* Fillpath (http://www.nizuka.fr/)*/
/*--------------------*/
.color-10 {
background: #f3cf3f;
}
.nav-fillpath a {
width: 100px;
height: 100px;
}
.nav-fillpath .icon-wrap {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.nav-fillpath a::before,
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
position: absolute;
left: 50%;
width: 3px;
height: 50%;
background: #566475;
content: '';
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.nav-fillpath .icon-wrap::before,
.nav-fillpath .icon-wrap::after {
z-index: 100;
height: 0;
background: #fff;
-webkit-transition: height 0.3s, -webkit-transform 0.3s;
transition: height 0.3s, transform 0.3s;
}
.nav-fillpath a::before,
.nav-fillpath .icon-wrap::before {
top: 50%;
-webkit-transform: translateX(-50%) rotate(-135deg);
transform: translateX(-50%) rotate(-135deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.nav-fillpath a.next::before,
.nav-fillpath a.next .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(135deg);
transform: translateX(-50%) rotate(135deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.nav-fillpath a::after,
.nav-fillpath .icon-wrap::after {
top: 50%;
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: translateX(-50%) rotate(-45deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.nav-fillpath a.next::after,
.nav-fillpath a.next .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
-webkit-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.nav-fillpath h3 {
position: absolute;
top: 50%;
margin: 0;
color: #fff;
text-transform: uppercase;
font-weight: 300;
font-size: 0.85em;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.nav-fillpath a.prev h3 {
left: 100%;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.nav-fillpath a.next h3 {
right: 100%;
text-align: right;
-webkit-transform: translateY(-50%) translateX(50%);
transform: translateY(-50%) translateX(50%);
}
.nav-fillpath a:hover .icon-wrap::before,
.nav-fillpath a:hover .icon-wrap::after {
height: 50%;
}
.nav-fillpath a:hover::before,
.nav-fillpath a:hover .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(-125deg);
transform: translateX(-50%) rotate(-125deg);
}
.nav-fillpath a.next:hover::before,
.nav-fillpath a.next:hover .icon-wrap::before {
-webkit-transform: translateX(-50%) rotate(125deg);
transform: translateX(-50%) rotate(125deg);
}
.nav-fillpath a:hover::after,
.nav-fillpath a:hover .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(-55deg);
transform: translateX(-50%) rotate(-55deg);
}
.nav-fillpath a.next:hover::after,
.nav-fillpath a.next:hover .icon-wrap::after {
-webkit-transform: translateX(-50%) rotate(55deg);
transform: translateX(-50%) rotate(55deg);
}
.nav-fillpath a:hover h3 {
opacity: 1;
-webkit-transform: translateY(-50%) translateX(0);
transform: translateY(-50%) translateX(0);
}
#media screen and (max-width: 520px) {
.nav-slide a.prev,
.nav-reveal a.prev,
.nav-doubleflip a.prev,
.nav-fillslide a.prev,
.nav-growpop a.prev {
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
.nav-slide a.next,
.nav-reveal a.next,
.nav-doubleflip a.next,
.nav-fillslide a.next,
.nav-growpop a.next {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.nav-slide a,
.nav-reveal a,
.nav-doubleflip a,
.nav-fillslide a {
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
.nav-growpop a {
-webkit-transform: translateY(-50%) scale(0.6);
transform: translateY(-50%) scale(0.6);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="space_between">
<h3 class="center_rounded_ol">Man-to-man suggestions</h3>
<ol class="rounded-list center_rounded_ol">
<li>
Name Surname
</li>
</ol>
</section>
<nav class="nav-fillpath">
<a class="next">
<span class="icon-wrap"></span>
<h3><strong>Alexis</strong> Tsipras</h3>
</a>
</nav>
Update:
using this is better because this way you separate your javascript all in .js or <script> instead of having it scattered on DOM elements so keep the HTML "clean", something like the inline CSS vs external CSS. Beside doing it this way you can easily attach more than one event..
This post jQuery.click() vs onClick has more detailed answer.

There is a typo in load() function:
function load() {
$("#foo").trigger('click'); //'r' was missing
}
Please note that
$(this)
inside burn() function returns window instance, is that what you are expecting there?
In case you want to change color of a link that gets clicked here is a HTML code (notice event parameter added):
Name Surname
and js:
function burn(element) {
$(element).css("color", "red");
}
This solution with 'this' lets you reuse burn() function for more that one link, it doesn't bind you to #foo elemenent only.

Off canvas menu not working on Iphone 5

I have an off canvas menu that "according to my client" that appears to not be functioning correctly. There are no errors whatsoever in my console, so I am not sure whats going on here, and i don't have an Iphone/pad to test on. Anyone want to give this a shot? demo
html:
<html>
<body>
<div id="site-wrapper" class="container">
<nav id="site-menu">
<ul class="nav">
<li class="parent"><a class="accordian-toggle" href="#" >Item Parent</a>
<ul class="nav-child unstyled small">
<li>Item</li>
<li>Item</li>
</ul>
</li>
<li class="parent"><a class="accordian-toggle" href="#" >Item Parent</a>
<ul class="nav-child unstyled small">
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
</nav>
<header id="header">
<a class="brand" href="/">My Company</a><br />
</header>
<div id="site-canvas">
<div id="mainbody">
<div class="container-fluid">
<p>main content</p>
</div>
</div>
<footer>
<p>footer</p>
</footer>
</div>
</div>
</body>
</html>
css/less:
header {
position: fixed;
top: 0;
z-index: #z-index * 6;
overflow: hidden;
width: 100%;
height: 65px;
}
#site-wrapper {
.reset-box;
}
#mainbody {
width: #100;
margin: 65px auto 0;
}
#menuToggle {
position: fixed;
top: 15px; left: 0;
z-index: #z-index * 7;
}
#menuButton {
background-color: #black;
margin: 0;
padding: 0;
height: 35px;
width: 50px;
}
#menuButton:hover {background-color: #black-hover;}
#site-menu {
background-color: #black;
height: #100;
position: fixed;
top: 0; left: -340px;
width: 330px;
z-index: #z-index * 5;
}
#site-menu:after {z-index: #z-index * 7;}
#site-canvas {
backface-visibility: hidden;
height: #100;
transform: translateX(0);
transform: translate3d(0, 0, 0);
width: #100;
}
/********************************
/* OFF CANVAS MENU
/*******************************/
.show-nav #site-canvas {
transform: translateX(330px);
transform: translate3d(330px, 0, 0);
}
.reveal #site-menu {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
.reveal .show-nav #site-menu {
transition: 900ms ease all;
transform: translateX(330px);
transform: translate3d(330px, 0, 0);
}
.reveal .show-nav #site-canvas {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
and last but not least the js:
/********************************
/* OFF CANVAS MENU
/*******************************/
$(document).ready(function(){
var special = ['reveal'];
$('.main-menu').click(function() {
var transitionClass = jQuery(this).data('transition');
if ($.inArray(transitionClass, special) > -1) {
$('body').removeClass();
$('body').addClass(transitionClass);
} else {
$('body').removeClass();
$('#site-canvas').removeClass();
$('#site-canvas').addClass(transitionClass);
}
$('#site-wrapper').toggleClass('show-nav');
$('.main-menu i').toggleClass('fa-ellipsis-v fa-ellipsis-h');
$('.main-menu div').toggle();
return false;
});
});
/********************************
/* OFF CANVAS MENU HEIGHT
/*******************************/
$(document).ready(function(){
$('#site-canvas').css({'min-height':($(window).height())+'px'});
$(window).resize(function(){
$('#site-canvas').css({'min-height':($(window).height())+'px'});
});
});
/********************************
/* NAV ACCORDIAN
/*******************************/
$(document).ready(function(){
$('.accordian-toggle').click(function(){
$('#site-menu .nav > .parent > .nav-child').slideUp();
if(!$(this).next().is(':visible')){
$(this).next().slideDown();
}
});
});

I found the problem was missing vendor prefixes...
/********************************
/* OFF CANVAS MENU
/*******************************/
.show-nav #site-canvas {
transform: translateX(-330px);
transform: translate3d(-330px, 0, 0);
-webkit-transform: translateX(-330px);
-webkit-transform: translate3d(-330px, 0, 0);
-ms-transform: translateX(-330px);
-ms-transform: translate3d(-330px, 0, 0);
}
.reveal #site-menu {
transform: translateX(0);
transform: translate3d(0, 0, 0);
-webkit-transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translateX(0);
-ms-transform: translate3d(0, 0, 0);
}
.reveal .show-nav #site-menu {
transition: 900ms ease all;
transform: translateX(-330px);
transform: translate3d(-330px, 0, 0);
-webkit-transform: translateX(-330px);
-webkit-transform: translate3d(-330px, 0, 0);
-ms-transform: translateX(-330px);
-ms-transform: translate3d(-330px, 0, 0);
}
.reveal .show-nav #site-canvas {
transform: translateX(0);
transform: translate3d(0, 0, 0);
-webkit-transform: translateX(0);
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translateX(0);
-ms-transform: translate3d(0, 0, 0);
}

jQuery panel slider opens with button click but won't close

I have a button on my page which opens a right panel by using jquery and modernizr frameworks. Button is placed on the rightmost place of screen. When it is clicked it slides to the left with the panel which it opens. The problem is, it won't slide back to where it was when it is clicked again.
HTML:
<!-- right panel -->
<div class="cd-panel from-right">
<header class="cd-panel-header">
<h1>Views</h1>
Close
</header>
<div class="cd-panel-container">
Views
<div class="cd-panel-content" ng-controller="ViewtreeCtrl">
<div>
Panel elements
</div>
</div>
<!-- cd-panel-content -->
</div>
<!-- cd-panel-container -->
Javascript:
jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//clode the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});
JsFiddle demo (You can see the CSS on JSFiddle)

jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
//use toggleClass
$('.cd-panel').toggleClass('is-visible');
});
});
JSFIDDLE
http://jsfiddle.net/Lecgrfvu/3/

Try this i used toggleClass (View in full screen mode to see the result)
jQuery(document).ready(function ($) {
//open the lateral panel
$('.cd-btn').on('click', function (event) {
event.preventDefault();
$('.cd-panel').toggleClass('is-visible');
});
//clode the lateral panel
});
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #424f5c;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: #424f5c;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 90%;
height: 100%;
top: 0;
background: #dbe2e9;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-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);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 20%;
}
}
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
.cd-btn {
visibility: visible !important;
position: absolute;
top: 400px;
left: -50px;
font-size: 16px;
padding: 10px;
margin: 0 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="cd-panel from-right">
<header class="cd-panel-header">
<h1>Views</h1>
Close
</header>
<div class="cd-panel-container"> Views
<div class="cd-panel-content" ng-controller="ViewtreeCtrl">
<div>
<ul class="collapsible-list">
<li class="nav-header">Views</li>
<li class="collapsible-list-subnav" ng-repeat="treeObject in treeObjects"><a class="collapsible-list-parent">{{treeObject.name}}</a>
<ul class="collapsible-list secondary">
<li class="collapsible-list-subnav"><a class="collapsible-list-parent">Public Views</a>
<ul class="collapsible-list tertiary">
<li ng-repeat="publicView in treeObject.publicViews" ng-click="viewClick($event, publicView)"><a>{{publicView.title}}</a>
</li>
</ul>
</li>
<li class="collapsible-list-subnav"><a class="collapsible-list-parent">Private Views</a>
<ul class="collapsible-list tertiary">
<li ng-repeat="privateView in treeObject.privateViews" ng-click="viewClick($event, privateView)"><a>{{privateView.title}}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- cd-panel-content -->
</div>
<!-- cd-panel-container -->
</div>

I desperately need somebody to help me make my CSS slider autoplay

I have this css only slider and I need to make it autoplay.
I'm not too familiar with coding javascript so this is a rather challenging problem for me.
I'm aware that the Javascript will/may have to be written for this code, but I figure that someone out there can could help clarify this for me?
<div class="sliderContainer 6u">
<ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slide">
<img src="images/1.jpg" />
</div>
<div class="nav">
<label for="img-6" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slide">
<img src="images/2" />
</div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
<div class="slide">
<img src="images/3.jpg" />
</div>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-4" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
</div>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-5" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-5" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
</div>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-6" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-6" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
</div>
<div class="nav">
<label for="img-5" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
<li class="nav-dots">
<label for="img-1" class="nav-dot" id="img-dot-1"></label>
<label for="img-2" class="nav-dot" id="img-dot-2"></label>
<label for="img-3" class="nav-dot" id="img-dot-3"></label>
<label for="img-4" class="nav-dot" id="img-dot-4"></label>
<label for="img-5" class="nav-dot" id="img-dot-5"></label>
<label for="img-6" class="nav-dot" id="img-dot-6"></label>
</li>
</ul>
Any help you can give me will be extremely helpful,
thanks

Since you have no markup to offer, I've created this:
Example snippet (pure css):
body {
background: #eee;
font-family: arial, helvetica, sans-serif;
margin: 50px auto;
padding: 0;
}
h1 {
font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif;
font-size: 36px;
text-align: center;
}
h3 {
font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif;
font-size: 22px;
font-style: italic;
color: #4e4e4e;
text-align: center;
margin-bottom: -100px;
}
#wrapper {
width: 400px !important;
margin: 0 auto;
overflow: hidden;
}
#wrapper {
perspective: 2500;
-webkit-perspective: 2500;
width: 800px;
margin: 200px auto 0 auto;
perspective-origin: 50% 150px;
-webkit-perspective-origin: 50% 150px;
transition: perspective, 1s;
-o-transition: -o-perspective, 1s;
-moz-transition: -moz-perspective, 1s;
-webkit-transition: -webkit-perspective, 1s;
}
#image:hover {
animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
#-webkit-keyframes spin {
from {
transform: rotateY(0);
-o-transform: rotateY(0);
-ms-transform: rotateY(0);
-moz-transform: rotateY(0);
-webkit-transform: rotateY(0);
}
to {
transform: rotateY(-360deg);
-o-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
-webkit-transform: rotateY(-360deg);
}
}
#image {
margin: 0 auto;
height: 300px;
width: 400px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
animation: spin 24s infinite linear;
-moz-animation: spin 24s infinite linear;
-o-animation: spin 24s infinite linear;
-webkit-animation: spin 24s infinite linear;
}
.image {
position: absolute;
height: 300px;
width: 400px;
border-radius: 25px;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
font-size: 20em;
color: #fff;
}
#image > .i1 {
transform: translateZ(485px);
-moz-transform: translateZ(485px);
-o-transform: translateZ(485px);
-ms-transform: translateZ(485px);
-webkit-transform: translateZ(485px);
}
#image > .i2 {
transform: rotateY(45deg) translateZ(485px);
-moz-transform: rotateY(45deg) translateZ(485px);
-o-transform: rotateY(45deg) translateZ(485px);
-ms-transform: rotateY(45deg) translateZ(485px);
-webkit-transform: rotateY(45deg) translateZ(485px);
}
#image > .i3 {
transform: rotateY(90deg) translateZ(485px);
-moz-transform: rotateY(90deg) translateZ(485px);
-o-transform: rotateY(90deg) translateZ(485px);
-ms-transform: rotateY(90deg) translateZ(485px);
-webkit-transform: rotateY(90deg) translateZ(485px);
}
#image > .i4 {
transform: rotateY(135deg) translateZ(485px);
-moz-transform: rotateY(135deg) translateZ(485px);
-o-transform: rotateY(135deg) translateZ(485px);
-ms-transform: rotateY(135deg) translateZ(485px);
-webkit-transform: rotateY(135deg) translateZ(485px);
}
#image > .i5 {
transform: rotateY(180deg) translateZ(485px);
-moz-transform: rotateY(180deg) translateZ(485px);
-o-transform: rotateY(180deg) translateZ(485px);
-ms-transform: rotateY(180deg) translateZ(485px);
-webkit-transform: rotateY(180deg) translateZ(485px);
}
#image > .i6 {
transform: rotateY(225deg) translateZ(485px);
-moz-transform: rotateY(225deg) translateZ(485px);
-o-transform: rotateY(225deg) translateZ(485px);
-ms-transform: rotateY(225deg) translateZ(485px);
-webkit-transform: rotateY(225deg) translateZ(485px);
}
#image > .i7 {
transform: rotateY(270deg) translateZ(485px);
-moz-transform: rotateY(270deg) translateZ(485px);
-o-transform: rotateY(270deg) translateZ(485px);
-ms-transform: rotateY(270deg) translateZ(485px);
-webkit-transform: rotateY(270deg) translateZ(485px);
}
#image > .i8 {
transform: rotateY(315deg) translateZ(485px);
-moz-transform: rotateY(315deg) translateZ(485px);
-o-transform: rotateY(315deg) translateZ(485px);
-ms-transform: rotateY(315deg) translateZ(485px);
-webkit-transform: rotateY(315deg) translateZ(485px);
}
img {
border-radius: 25px;
<body>
<h3>(hover over to pause)</h3>
<div id="wrapper">
<div id="image">
<div class="image i1">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Noe-in-leaves.jpg">
</div>
<div class="image i2">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Nat-sitting.jpg">
</div>
<div class="image i3">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Nat-noodles.jpg">
</div>
<div class="image i4">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Charlie-smiling.jpg">
</div>
<div class="image i5">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Girls-in-leaves.jpg">
</div>
<div class="image i6">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Natalie-smiling.jpg">
</div>
<div class="image i7">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Charlie-sleeping.jpg">
</div>
<div class="image i8">
<img src="https://dl.dropbox.com/u/80409395/Codepen/Sledding.jpg">
</div>
</div>
</div>
</body>
I would like to draw attention to this hover state:
#image:hover {
animation-play-state: paused;
-o-animation-play-state: paused;
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
since it is what is actually 'pausing' the animation.

I think you should study about setTimeout and SetInterval of Javascript.
Hope this helps.