We Keep Coding

Adding another nav item using javascript and css

I have created a burger menu, and copied this code https://codepen.io/woodwoerk/pen/BoEGYZ?q=burger+menu&limit=all&type=type-pens. However in this example there is three items in the drop down menu and in my website I have four. I tried adding another item to the drop down and changing the css and js however now I have a blank space where the new item has been added.
Here is what the menu looks like in the browser
Not sure how I can fix this to show all four items in the drop down. Below is the code I have
var Menu = {
el: {
menu: $('.menu'),
menuTop: $('.menu-top'),
menuSecond: $('.menu-second'),
menuClose: $('.menu-close'),
menuMiddle: $('.menu-middle'),
menuBottom: $('.menu-bottom'),
menuText: $('.menu-text')
},
init: function() {
Menu.bindUIactions();
},
bindUIactions: function() {
Menu.el.menu.on('click', function(event) {
Menu.activateMenu(event);
event.preventDefault();
});
},
activateMenu: function() {
Menu.el.menuTop.toggleClass('menu-top-expand expand');
Menu.el.menuSecond.toggleClass('menu-second-expand expand');
Menu.el.menuMiddle.toggleClass('menu-middle-expand expand');
Menu.el.menuBottom.toggleClass('menu-bottom-expand expand');
Menu.el.menuText.toggleClass('menu-text-expand');
Menu.el.menuClose.toggleClass('menu-close-visible');
}
};
//Stop menu item click closing the menu
$(".menu .menu-global").click(function(e) {
e.stopPropagation();
});
Menu.init();
span {
display: inline-block;
vertical-align: middle;
color: white;
}
ul {
display: block;
list-style-type: none;
text-align: right;
}
a {
color: #FFF;
}
a:hover {
opacity: 0.7;
}
.menu {
margin: 0 20px 0 0;
padding-left: 1.25em;
cursor: pointer;
position: relative;
width: 30px;
height: 50px;
text-align: right;
float:right;
}
.menu-close {
font-size: 0em;
opacity: 0;
text-align: center;
font-weight: bold;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.menu-close-visible {
font-size: 2em;
opacity: 1;
-webkit-transition: 0.2s 0.4s;
transition: 0.2s 0.4s;
}
.menu-global {
z-index: -1;
position: absolute;
left: 0;
height: 10px;
width: 100%;
background-color: #ffffff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.menu-global:hover {
left: 10px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.menu-top {
top: 0;
}
.menu-second {
top: 18px;
}
.menu-middle {
top: 36px;
}
.menu-bottom {
top: 54px;
}
.menu-text{
opacity: 0;
font-size: 0em;
padding: 10px 0;
-webkit-transition: 0.1s;
transition: 0.1s;
}
.expand {
box-shadow: rgba(0, 0, 0, 0.1) -2.5px 5px 7.5px, rgba(0, 0, 0, 0.1) 2.5px 5px 7.5px;
width: 200px;
height: 50px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.menu-top-expand {
top: 50px;
background: #FFF8E1;
-webkit-transition: all 0.5s 0.3s, left 0.1s;
transition: all 0.5s 0.3s, left 0.1s;
}
.menu-second-expand {
top: 100px;
background: #FFF8E1;
-webkit-transition: all 0.5s 0.2s, left 0.1s;
transition: all 0.5s 0.2s, left 0.1s;
}
.menu-middle-expand {
top: 150px;
background: #FFECB3;
-webkit-transition: all 0.5s 0.1s, left 0.1s;
transition: all 0.5s 0.1s, left 0.1s;
}
.menu-bottom-expand {
top: 200px;
height: 150px;
background: #FFE082;
-webkit-transition: all 0.5s, left 0.1s;
transition: all 0.5s, left 0.1s;
}
.menu-text-expand{
color: #000000;
opacity: 0.8;
padding: 10px;
font-size: 1.3em;
-webkit-transition: all 0.2s 0.7s, font-size 0.1s;
transition: all 0.2s 0.7s, font-size 0.1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<div class="menu-close fa fa-close"></div>
<li class="menu-global menu-top"><span class="menu-text">Home</span></li>
<li class="menu-global menu-second"><span class="menu-text">View Holiday Gallery</span></li>
<li class="menu-global menu-middle"><span class="menu-text">View Itinerary</span></li>
<li class="menu-global menu-bottom"><span class="menu-text">Settings</span></li>
</ul>

If you are adding another menu element you need to make sure you add all the proper required additions in your code. From hacking through it i got this:
First add the item in the html, and refer to it as bottom2 from now on:
<li class="menu-global menu-bottom2"><span class="menu-text">My ExtraElement</span></li>
notice the class is now unique: menu-bottom2. That is so the the margin from top would be properly aggregated to display it below the first .menu-bottom element.
now for the css add this:
.menu-bottom2 {
top: 54px;
}
and this:
.menu-bottom2-expand {
top: 200px;
background: #FFECB3;
-webkit-transition: all 0.5s 0.1s, left 0.1s;
transition: all 0.5s 0.1s, left 0.1s;
}
and finally the javascript:
in the menu.el:
menuBottom2: $('.menu-bottom2'),
in the menu.activateMenu:
Menu.el.menuBottom2.toggleClass('menu-bottom2-expand expand');
and here is the full codepen:
https://codepen.io/anon/pen/vdKYxb

CSS link in overlay taking over a div

I have a <div> that contains a link.
At the bottom right corner of this <div>, I have an overlay element which takes over the whole <div> when hovered.
This overlay element also contains a link.
My problem is that the link in the overlying element is not clickable.
The problem is because I use pointer-events: none; on class .overlay-content, but if I don't use it, both links become dead.
Please see code here:
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.amg-corner-button_wrap:hover~.overlay-content {
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->
Also, here is fiddle.
Is there any way that I can achieve this?

can't believe I actually found a pure CSS solution without any drawbacks.
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.wrap:hover .amg-corner-button_wrap {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.wrap:hover .amg-corner-button_wrap ~ .overlay-content {
pointer-events: auto;
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class="wrap">
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
</div> <!-- panel body -->
</div> <!-- panel default -->
JSFiddle
Instead of listening to the :hover event on the corner-button, listen to it on a parent element. Since the :hover will be dispatched regardless of the mouse interaction of the elements' children, it is possible to set pointer-events: auto to the children containing links (overlay-content), once the corner-button has been hovered. Now, that the overlay-content is hoverable and since it's a child of the wrapping div, it will cause the :hover to stay active over the whole wrapping div.

I would recommend using JS style swapping instead of CSS pointer events for this problem. You need to trigger one change to your css when you mouse over the bottom corner, and a separate event when you mouse out of the container. I do not believe CSS gives you that kind of conditional control.

Here is half a solution using animations instead of transitions. This works for when you hover on to the amg-corner-button_wrap but not when you move off it. I'm a bit new to animations so hopefully someone here who knows more maybe able to help you with the second half.
There is also a weird visual in here if you hover on the amg-corner-button_wrap and hover off mid transition. The reason for this is that I added a background color to overlay-content so when it's fading in and you mouse off amg-corner-button_wrap the swipe starts to reverse before the fade is complete.
Anyway, hope this 50% solution helps you or others drive this to 100%! Have to run to a meeting, good luck :-)
#keyframes example {
0% {
visibility: hidden;
opacity: 0;
}
1% {
visibility: visible;
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 200px;
width: 200px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -120px;
bottom: -120px;
width: 200px;
height: 200px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.overlay-content {
visibility: hidden;
opacity: 0;
background-color: #e8c63d;
bottom: 0;
color: #333;
left: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.overlay-content~.amg-corner-button_wrap,
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.amg-corner-button_wrap:hover~.overlay-content,
.overlay-content:hover {
animation-name: example;
animation-duration: 0.3s;
animation-timing-function: linear;
animation-delay: 0.3s;
animation-fill-mode: both;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->

Here's a working fiddle for a css and html only change: https://jsfiddle.net/y2auh7gn/4/.
It separates the link from overlay-content and places it where it's supposed to be with position: absolute. We need to move the link out of overlay-content so that when we hover over it the overlay doesn't disappear.
There's a side-effect where the link pops out with the corner piece.

How to do reverse animation in CSS?

So for the following code, I have a circular notification that animates, opening up left and displaying information and a profile image. I would like to be able to reverse the animation back by having the circle go forward covering up the info and fading out (which I already have inputed). However, I'm not sure how to implement this. I've tried a couple of ways like switching the animation around but it doesn't seem to work. Any suggestions?
You can click the "CLOSE ME" button to close the notification and the "OPEN ME" to open it as well.
$(document).ready(function() {
$(".open").click(function(e) {
$(".pgn-wrapper").fadeIn(250);
});
$(".close").click(function(e) {
$(".pgn-wrapper").fadeOut(500);
});
});
/* Circle Animation
------------------------------------
*/
.pgn-circle .alert {
border-radius: 300px;
animation: fadeInCircle 0.3s ease forwards,
resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;
-webkit-animation: fadeInCircle 0.3s ease forwards,
resizeCircle 0.3s 0.4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;
height: 50px;
overflow: hidden;
padding: 6px 55px 6px 6px;
-webkit-transform: translateZ(0);
position: relative;
}
.pgn-wrapper[data-position$='-right'] .pgn-circle .alert {
float: right;
}
.pgn-wrapper[data-position$='-left'] .pgn-circle .alert {
float: left;
}
.pgn-circle .alert > div > div.pgn-thumbnail > div {
border-radius: 50%;
overflow: hidden;
width: 48px;
height: 48px;
}
.pgn-circle .alert > div > div.pgn-thumbnail > div > img {
width: 100%;
height: 100%;
}
.pgn-circle .alert > div > div.pgn-message > div {
opacity: 0;
height: 47px;
padding-left: 9px;
animation: fadeIn .3s .5s ease forwards;
-webkit-animation: fadeIn .3s .5s ease forwards;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
word-wrap: break-word;
}
.pgn-circle .alert > div > div.pgn-message > div p:only-child {
padding: 12px 0;
}
.pgn-circle .alert .close {
margin-top: -12px;
position: absolute;
right: 18px;
top: 50%;
opacity: 0;
animation: fadeIn .3s .5s ease forwards;
-webkit-animation: fadeIn .3s .5s ease forwards;
}
.pgn-circle .alert p {
margin-bottom: 0;
}
.pgn-circle .alert > div {
display: table;
height: 100%;
}
.pgn-circle .alert > div > div {
display: table-cell;
vertical-align: middle;
}
#keyframes fadeInCircle {
0% {
opacity: 0;
width: 60px;
}
100% {
opacity: 1;
width: 60px;
}
}
#-webkit-keyframes fadeInCircle {
0% {
opacity: 0;
width: 60px;
}
100% {
opacity: 1;
width: 60px;
}
}
#keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
#-webkit-keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.close:target {
animation: resizeCircle2 1s all;
animation-direction: alternate;
}
#keyframes resizeCircle2 {
0% {
width: 300px;
}
100% {
width: 60px;
}
}
/* Headings
------------------------------------
*/
p {
display: block;
font-size: 14px;
font-weight: normal;
letter-spacing: 0.01em;
line-height: 22px;
margin: 0px 0px 10px 0px;
font-style: normal;
white-space: normal;
}
.bold {
font-weight: bold !important;
}
/* Alert
------------------------------------
*/
.alert {
background-image: none;
box-shadow: none;
text-shadow: none;
padding: 9px 19px 9px 15px;
border-radius: 3px;
font-size: 13px;
border-width: 0;
-webkit-transition: all 0.2s linear 0s;
transition: all 0.2s linear 0s;
}
.alert-danger, .alert-error {
background-color: #c42827;
color: white;
border-color: #933432;
}
.alert-danger .close, .alert-error .close {
background-position: -95px -10px !important;
}
/*------------------------------------------------------------------
Notifications
--------------------------------------------------
*/
.pgn-wrapper[data-position='top'] {
top: 0;
left: 0;
right: 0;
}
.pgn {
position: relative;
margin: 10px;
}
.pgn .alert {
margin: 0;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div class="pgn-wrapper" data-position="top-right">
<div class="pgn push-on-sidebar-open pgn-circle">
<div class="alert alert-danger">
<div>
<div class="pgn-thumbnail">
<div>
<img width="40" height="40" style="display: inline-block;" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
</div>
</div>
<div class="pgn-message">
<div>
<p class="bold" style="color:white">John Doe</p>
<p>Logging out in <b>60</b> second(s).</p>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="open" href="#">OPEN ME</a>
<a class="close" href="#">CLOSE ME</a>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Well, you've got a ton of code and I didn't parse through all of it, but I can say that when you have an animation like this:
#keyframes resizeCircle {
0% {
width: 60px;
}
100% {
width: 300px;
}
}
You are indicating where the width should start and end so to reverse that, you'd want to either ensure that this animation is tied to a temporary state, like a hover with a selector like this:
element:hover {
animation:resizeCircle 1s all;
}
Then, the animation would only apply when the element is being hovered and when it isn't the element will animate back to its original state.
Or, you could set up a separate animation that specifies the reverse property values:
#keyframes resizeCircle2 {
0% {
width: 300px;
}
100% {
width: 60px;
}
}
and apply that to a "trigger" selector, such as:
element:target {
animation:resizeCircle2 1s all;
}
Which would (in this case) apply the reverse animation when the element is the target of a click.

Here's an example:
<div class="expandable"></div>
div.expandable {
background-color: green;
width: 30px;
height: 25px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
div.expandable:hover {
width: 300px;
}
You can give that a run here: https://plnkr.co/edit/wa5Ny6vmluJv6xeDs7qt?p=preview

back to top button doesn't hide

i am new to jquery. i am making a back to top arrow for my website, i have a problem about hiding the back to top button. It always show and never hide. All i want is to hide the button first and after maybe 90px height it will show again. Please help me with this.
Here is my jquery script from the top of my header:
<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 90) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0}, 800);
return false;
});
});
});
</script>
Here is my back to top HTML :
<a id="back-top" href="#top">
<i id="back-topi" class="fa fa-arrow-circle-up"></i>
</a>
my css :
#back-top {
display: block !important;
background: none;
margin: 0;
position: fixed;
bottom: 50px;
right: 45%;
width: 40px;
height: 40px;
z-index: 100;
text-decoration: none;
color: #ffffff;
background-color: rgba(163,15,15,0.4);
border-radius: 8px !important;
}
#back-topi {
display: block !important;
font-size: 40px;
}

You have to change your CSS as well as jQuery as:
Code Snippet
$(document).ready(function(e) {
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('#back-top');
//hide or show the "back to top" link
$(window).scroll(function() {
($(this).scrollTop() > offset) ? $back_to_top.addClass('is-visible'):
$back_to_top.removeClass('is-visible is-fade-out');
if ($(this).scrollTop() > offset_opacity) {
$back_to_top.addClass('is-fade-out');
}
});
//smooth scroll to top
$back_to_top.on('click', function(event) {
event.preventDefault();
$('body,html').animate({
scrollTop: 0,
}, scroll_top_duration);
});
});
body {
height: 1000px;
margin: 0;
padding: 0;
}
#back-top {
display: inline-block;
background: none;
margin: 0;
position: fixed;
bottom: 50px;
right: 45%;
width: 40px;
height: 40px;
z-index: 100;
text-decoration: none;
color: #ffffff;
background-color: rgba(163, 15, 15, 0.4);
border-radius: 8px;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
#back-topi {
font-size: 40px;
}
#back-top.is-visible,
#back-top.is-fade-out,
#back-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
#back-top.is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
#back-top:hover {
background-color: #0180ca;
opacity: 1;
}
#back-top:hover,
#back-top:active,
#back-top:focus {
outline: none;
text-decoration: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="back-top" href="#top">
<i id="back-topi" class="fa fa-arrow-circle-up"></i>
</a>

When you scroll you (top > 90) you need to show it with command
$("#back-top").show();
Edit
The thing is !important tag overrides display:none tag.
Just remove it (on css)
display:none;

Images adapting to window re-size too early

I have this divider that has inside it images. When i re-size horizontally the window starting from the right to the left, the images starts going down before the right-end of the browser reach it. Any help to make the images move down each other when the right-end of the browser reach it?
JSFIDDLE: https://jsfiddle.net/prtdaay1/2/
CSS:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
ol, ul {
list-style: none;
}
html {
background-color: #FFFFFF;
-webkit-font-smoothing: antialiased;
}
body {
background-color: #ffffff;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
background-color: #ffffff;
text-align: center;
max-width:1600px;
overflow: hidden;
overflow-y: scroll;
}
h1, h2, h3, h4, h5, h6 {
color: #222;
font-weight: 600;
line-height: 1.3em;
}
h2 {
margin-top: 1.3em;
}
.custom-class {
text-align: right;
margin-top:-130px;
margin-right: 20px;
}
a {
color: #000000;
text-decoration: none;
}
b, strong {
font-weight: 600;
}
samp {
display: none;
}
img {
-webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
background: transparent;
border-style:none;
border-radius: 4px;
display: block;
margin: 1.3em auto;
max-width: 95%;
}
.logo {
text-align: center;
margin-top:40px;
}
li {
list-style-type: none;
font-size: 1.5em;
padding-top: 8px;
text-align:center;
border-style: none;
}
.menu li {
position: relative;
top: 180px;
left: 0px;
}
#item7 {
transition: opacity .8s, left .8s ease-out;
-moz-transition: opacity .8s, left .8s ease-out;
-webkit-transition: opacity .8s, left .8s ease-out;
-o-transition: opacity .8s, left .8s ease-out;
margin-left:105px
}
#item6 {
transition: opacity 1s, left 1s ease-out;
-moz-transition: opacity 1s, left 1s ease-out;
-webkit-transition: opacity 1s, left 1s ease-out;
-o-transition: opacity 1s, left 1s ease-out;
margin-left: 95px;
}
#item5 {
transition: opacity 1.2s, left 1.2s ease-out;
-moz-transition: opacity 1.2s, left 1.2s ease-out;
-webkit-transition: opacity 1.2s, left 1.2s ease-out;
-o-transition: opacity 1.2s, left 1.2s ease-out;
margin-left: 60px;
}
#item4 {
transition: opacity 1.4s, left 1.4s ease-out;
-moz-transition: opacity 1.4s, left 1.4s ease-out;
-webkit-transition: opacity 1.4s, left 1.4s ease-out;
-o-transition: opacity 1.4s, left 1.4s ease-out;
margin-left: 123px;
}
#item3 {
transition: opacity 1.6s, left 1.6s ease-out;
-moz-transition: opacity 1.6s, left 1.6s ease-out;
-webkit-transition: opacity 1.6s, left 1.6s ease-out;
-o-transition: opacity 1.6s, left 1.6s ease-out;
margin-left: 113px;
}
#item2 {
transition: opacity 1.8s, left 1.8s ease-out;
-moz-transition: opacity 1.8s, left 1.8s ease-out;
-webkit-transition: opacity 1.8s, left 1.8s ease-out;
-o-transition: opacity 1.8s, left 1.8s ease-out;
margin-left: 130px;
}
#item1 {
transition: opacity 2s, left 2s ease-out;
-moz-transition: opacity 2s, left 2s ease-out;
-webkit-transition: opacity 2s, left 2s ease-out;
-o-transition: opacity 2s, left 2s ease-out;
margin-left: 117px;
}
#item1>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item2>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item3>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item4>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item5>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item6>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item7>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
.permahover li {
opacity: 1;
left: -33%;
}
.headlines li {
font-size:1.5em;
color:#000000;
transition: all 0.5s;
cursor: pointer;
}
.headlines:hover li, .headlines.active li {
/* PARENT HOVER */
opacity:0.4;
cursor: pointer;
/* Dim all */
}
.headlines li:hover, .headlines li.active {
/* SINGLE HOVER */
opacity: 1;
/* Max one */
color:#000000;
cursor: pointer;
}
#first
{ display: none;
width: 50%;
height: 220px;
top: 20%;
margin: auto;
position: relative;
}
#first img
{
height: 100px;
width: 100px;
float:left;
margin-right: 5%;
cursor: pointer;
}
#second
{
width: 50%;
height: 220px;
margin:auto;
padding-left: 170px;
margin-top: -215px;
}
#second img
{
height: 100px;
width: 100px;
float:left;
margin-right: 5%;
cursor: pointer;
}
#third
{
display: none;
width: 50%;
height: 220px;
margin:auto;
padding-left: 150px;
margin-top: -215px;
}
#third img
{
height: 100px;
width: 100px;
float:left;
margin-right: 5%;
cursor: pointer;
}
#-webkit-keyframes colorize {
0% {
-webkit-filter: grayscale(100%);
}
100% {
-webkit-filter: grayscale(0%);
}
}
#keyframes colorize {
0% {
filter: grayscale(100%);
}
100% {
filter: grayscale(0%);
}
}
}
<!-- slider css-->
#wrapper {
width: 10%;
padding: px 0;
}
#slider-container {
padding: 20px 50px;
height: 300px;
top:-18%;
left: 50px;
width: 700px;
overflow: hidden;
position: relative;
}
.slider-view-area {
overflow: hidden;
max-height: 300px;
}
#nav p {
position: absolute;
top: 40px;
left: 0px;
cursor:pointer;
color:grey;
}
#prev {
margin-left: 520px;
font-size: 30px;
}
#next {
right: -440px;
font-size: 30px;
}
#mask {
width: 5000px;
height: 100%;
}
.item {
width: 1200px;
height: 100%;
float: left;
}
.content img {
height: 100px;
width: 17%;
float:left;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.content {
width: 50%;
height: 220px;
top: 30px;
left:
margin: auto;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
.hidden {
display: none;
}

Try to fix these id's style
#second {
height: 220px;
margin: -215px auto auto;
padding-left: 170px;
width: 50%;
}
#third {
display: none;
height: 220px;
margin: -215px auto auto;
padding-left: 150px;
width: 50%;
}
Instead of that use max width and and avoid padding you can use margin: auto to show in center.