Develop Reference

html page goes crazy when resizing the browser

So I want to build a modal that contains 3 pages and a progress bar that changes whenever I click on a button. The problem is when I resize my browser the progress bar goes out from the modal.
Here is my code:
$( document ).ready(function() {
$('.trigger').click(function() {
$('.modal-wrapper').toggleClass('open');
$('.page-wrapper').toggleClass('blur');
return false;
});
$('.go').click(function () {
$('.pg2').toggleClass('active') ;
}) ;
$('.gg').click(function () {
$('.pg3').toggleClass('active') ;
}) ;
});
var pageIndex = 1;
showPages(pageIndex);
function nextPage(n) {
showPages(pageIndex += n);
}
function showPages(n) {
var i;
var pages = document.getElementsByClassName("pop");
if (n > pages.length) {pageIndex = 1}
if (n < 1) {pageIndex = pages.length}
for (i = 0; i < pages.length; i++) {
pages[i].style.display = "none";
}
pages[pageIndex-1].style.display = "block";
}
#import url(https://fonts.googleapis.com/css?family=Courgette|Oswald);
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
html, body{
width:100%;
height:100%;
margin:0;
}
.sent{
font-family: Dancing Script, Georgia, Times, serif;
font-size :35px ;
text-align: center;
color:#01bce5 ;
}
.page-wrapper{
width:100%;
height:100%;
background:url(http://feelgrafix.com/data/background/background-1.jpg) center no-repeat;
background-size:cover;
}
.blur{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
a.btn{
width:150px;
display:block;
margin:-25px 0 0 -75px;
padding:1em 0;
position:absolute;
top:50%; left:50%;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
background:rgba(217,67,86,1);
}
a.go{
width:150px;
display:block;
margin:-25px 0 0 -75px;
padding:1em 0;
position:absolute;
top:60%; left:80%;
font:1.125em 'Arial', sans-serif;
font-weight:700;
text-align:center;
text-decoration:none;
color:#fff;
background:rgba(217,67,86,1);
}
a.gg{
width:200px;
height: 10px;
display:block;
margin:-25px 0 0 -250px;
padding:1em 0;
position:absolute;
top:70%; left:80%;
font:1.125em 'Arial', sans-serif;
font-weight:400;
text-align:center;
text-decoration:none;
color:#fff;
background:rgba(217,67,86,1);
}
.modal-wrapper{
width:100%;
height:100%;
position:fixed;
top:0; left:0;
background:rgba(255,257,153,0.75);
visibility:hidden;
opacity:0;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
overflow: hidden;
list-style-position: inside;
}
.modal-wrapper.open{
opacity:1;
visibility:visible;
overflow: hidden;
list-style-position: inside;
}
.modal{
width:600px;
height:600px;
display:block;
margin:50% 0 0 -300px;
position:relative;
top:40%; left:50%;
background:#fff;
opacity:0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
overflow: hidden;
word-break:break-all;
}
.modal-wrapper.open .modal{
margin-top:-200px;
opacity:1;
}
.head{
width:90%;
height:32px;
padding:1.5em 5%;
overflow:hidden;
background:#01bce5;
}
.btn-close{
width:32px;
height:32px;
display:block;
float:right;
}
.btn-close::before, .btn-close::after{
content:'';
width:32px;
height:6px;
display:block;
background:#fff;
}
.btn-close::before{
margin-top:12px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.btn-close::after{
margin-top:-6px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.content{
padding:5%;
}
.flat-button {
position: relative;
width: 150px; height: 60px;
background: #E74C3C;
margin: 0 auto;
margin-top: 40px;
overflow: hidden;
z-index: 1;
cursor: pointer;
transition: color .3s;
/* Typo */
line-height: 60px;
text-align: center;
color: #fff;
}
.flat-button:after {
position: absolute;
top: 90%; left: 0;
width: 100%; height: 100%;
background: #C0392B;
content: "";
z-index: -2;
transition: transform .3s;
}
.flat-button:hover::after {
transform: translateY(-80%);
transition: transform .3s;
}
.round-image{
border-radius:100%;
height: 280px;
margin: 0 auto;
overflow:hidden;
width: 280px;
}
.descrip{
padding:1em 0;
position:absolute;
top:40%;
left:70%;
font:1.125em 'Arial', sans-serif;
text-align:center;
text-decoration:none;
margin:-25px 0 0 -75px;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
width: 15%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
left:350px;
height: 10px;
}
.progressbar li:before {
width: 30px;
height: 30px;
content: counter(step);
counter-increment: step;
line-height: 30px;
border: 5px solid #7d7d7d;
display: block;
text-align: center;
margin: 200px auto 10px auto;
border-radius: 50%;
}
.progressbar li:after {
width: 100%;
height: 7px;
content: '';
position: absolute;
background-color: #7d7d7d;
top: 215px;
left: -50%;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: green;
}
.progressbar li.active:before {
border-color: #01bce5;
}
.progressbar li.active + li:after {
background-color: #01bce5;
}
.titre{
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./main.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="./fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="http:////fonts.googleapis.com/css?family=Dancing+Script">
<title></title>
</head>
<body>
<div class="page-wrapper">
<a class="btn trigger" href="javascript:;">Popup!</a>
</div>
<div class="modal-wrapper">
<div class="modal">
<div class="head">
<a class="btn-close trigger" href="javascript:;"></a>
</div>
<div class="content">
<div class="container">
<div class="pop fade">
<div class="text">
<h1 class='sent'>FIRST PAGE </h1>
</div>
<img src="http://i.imgur.com/2ZgHKbQ.jpg" alt="Beach in your dream" class="round-image" >
<p class='descrip'>Lorem ipsum dolor sit amet, consectetur adipisicing elit </p>
<a class="btn go" href='javascript:;' onclick='nextPage(1);'>GO!</a>
</div>
<div class="pop fade">
<div class="text">
<h3 class="titre">Lorem ipsum dolor sit amet</h3>
</div>
<a class="btn gg" href='javascript:;' onclick='nextPage(1);'>GO!</a>
</div>
<div class="pop fade">
<div class="text">
<h1 class='sent'>Inscription</h1>
</div>
</div>
</div>
</div>
</div>
<ul class="progressbar">
<li class="active"></li>
<li class='pg2'></li>
<li class="pg3"></li>
</ul>
</div>
</body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"> </script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="./index.js" type="text/javascript"></script>
</html>

I think your issue is here:
.progressbar li {
list-style-type: none;
width: 15%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
left:350px;
height: 10px;
}
The left:350px; property is hardcoding a value that is pushing the progress bar to the right... I would recommend to use a percentage. Also the list that creates the progress bar is outside of the modal view. Maybe would be better that is inside.
Finally if you are testing responsive design add this meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> in your head. It will help your site when it renders on mobile devices

In your HTML code add
<div style="clear:both"></div>
before
<ul class="progressbar">
<li class="active"></li>
<li class='pg2'></li>
<li class="pg3"></li>
</ul>
Then change left:350px to left:x%.
.progressbar li {
list-style-type: none;
width: 15%;
float: left;
font-size: 12px;
position: relative;
text-align: center;
text-transform: uppercase;
color: #7d7d7d;
left:20%;
height: 10px;
}
if you want your design work for every size of browser then making different css for different display size must help you.
use following meta tag in head of your code
<meta name="viewport" content="width=device-width, initial-scale=1">
then import two css using media query
<link rel="stylesheet" media="screen and (max-width:768px)" type="text/css" href="./mobile.css">
<link rel="stylesheet" media="screen and (min-width:769px)" type="text/css" href="./desktop.css">
if your browser screen resolution is less than 768px browser will render mobile.css
if resolution is more than 768 browser will render destop.css you can check your browser css here. check resolution for different screen size will clear you more.
Learn more about responsive web design here
Note now most of modern browser support % as input for size elements like width margin height etc use this instead of px will also help you to make html more responsive for more device and screen size.
FYI, you can also use internal media query for css like
body
{
width: 75%;
}
#media only screen and (max-width: 500px) {
body {
width: 91.66%;
}
}

.animate() in jQuery and if condition seems to don't work

I'm not an expert in jQuery and I try to create a kind of button-toggle :
When I click on the switch-button "Home/News", the content should switch too.
But that seems to don't work... Despite the if condition, the condition AND the else are executed... I don't get it. Someone can tell me where do I failed ?
Here is the jsfiddle : https://jsfiddle.net/zgLsbw2h/1/
The jQuery :
$(document).ready(function(){
function switchButton(){
console.log("coucou")
$('.onoffswitch').click(function(){
if($('.onoffswitch').hasClass('nothere')){
$('.container_slide_actu').animate({
left : 0}, 700);
$('.onoffswitch').removeClass('nothere');
}else{
$('.container_slide_actu').animate({
left : '-100%'}, 700);
$('.onoffswitch').addClass('nothere');
}
});
}
switchButton();
});
Thanks in advance.
**Edit
More explanation (in hope to simplify):
I have two html container. When I click on the button, I want to switch them. By default, I got the container1 ; when I click odd => container2 ; when I click even => container1...
Some screenshots to explain :
-The banner of my website (default => container1 (1 on the screenshot)) and the slideshow (who comes over the banner => container2 (2 on the screenshot)) : http://prntscr.com/dpwxat

The reason for your animation going in and out is because the onclick is running twice. The reason for that is because you targeted the "onoffswitch" class, which you have more than one of. If you target the"#myonoffswitch" instead, it being an id, only targets one thing and will only fire once. I cleaned up your JS a bit too. Check it out, let me know what you think.
$(document).ready(function(){
$('#myonoffswitch').on("click", function(){
if($("#myonoffswitch").is(':checked') == false) {
$('.container_slide_actu').animate({
left : 0}, 700);
}else{
$('.container_slide_actu').animate({
left : '-100%'}, 700);
}
});
});
body{
margin:0;
}
.banner-site{
width:100%;
background-color:white !important;
background-position:center !important;
background-repeat:no-repeat !important;
background-size:cover !important;
background-attachment:fixed;
height:350px;
display:flex;
align-items:center;
margin-top:-15px;
transition:all .7s;
position:relative;
border-bottom:1px solid white;
border-top:1px solid white;
overflow:hidden;
}
.banner-site:hover h1{
color:white;
border:2px solid white;
text-shadow:1px 1px 5px rgba(0,0,0,.9);
}
.banner-site:hover h1 a{
color:white;
}
.banner-site a{
color:black;
text-decoration:none;
transition:all .7s;
}
.banner-site .false-hover{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:rgba(0,0,0,0);
z-index:1;
transition:all .7s;
}
.banner-site h1{
text-align:center;
border:2px solid #161416;
color:#161416;
margin:auto;
padding:10px;
border-radius:2px;
font-family:'Cinzel';
font-size:30px;
font-weight:300;
text-transform:uppercase;
position:relative;
z-index:2;
text-shadow:1px 1px 5px rgba(255,255,255,.9);
transition:all .3s;
}
.banner-site .false-hover:hover{
background-color:rgba(0,0,0,.5);
}
/*On/Off switch | ty https://proto.io/freebies/onoff/ */
.onoffswitch {
position: absolute; width: 90px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
opacity:.5;/*à voir si on keep*/
right:10px; bottom:15px;
z-index:9999;
display:block;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 20px; text-transform:uppercase;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: 'Oswald', Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "Home";
padding-left: 10px;
background-color: #000000; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "News";
padding-right: 10px;
background-color: #FFFFFF; color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 25px; margin: 2.5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 56px;
border: 2px solid #999999; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
.container_slide_actu{
width:100%;
height:350px;
z-index:999;
position:absolute;
top:0;
left:-100%;
display:block;
}
#mavideo {
top: 0;
left: 0;
width: 100%;
height: 350px;
object-fit:cover;
}
/*look http://www.alsacreations.com/tuto/lire/1620-une-video-arriere-plan-sur-toute-la-page.html*/
<!DOCTYPE html>
<html>
<head>
<title></title>
<body>
<div class="banner-site" style="background-image:url('https://media.senscritique.com/media/000009498078/1200/Lady_Vengeance.jpg')">
<h1><a class="tdn cgrey" href="#" title="Retour à l'accueil de">Play it's evil?</a></h1>
<div class="false-hover"></div>
<!-- Button on/off à replace-->
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked autocomplete="off">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="container_slide_actu">
<video id="mavideo" controls autoplay muted loop="true">
<source src="" type="video/mp4">
</video>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
</html>

I added console.log('has nothere'); and console.log('nothere not present'); only to make sure the if was working and noticed at the beginning that both the if and else conditions were being met on a single click.
Not sure what you are trying to accomplish yet but I moved the add/remove class lines inside an anonymous function to be executed once the animation has been completed.
$(document).ready(function(){
function switchButton(){
console.log("coucou")
$('.onoffswitch').click(function(){
if($('.onoffswitch').hasClass('nothere')){
console.log('has nothere');
$('.container_slide_actu').animate({
left : 0}, 700, function() {
// Animation complete.
$('.onoffswitch').removeClass('nothere');
});
}else{
console.log('nothere not present');
$('.container_slide_actu').animate({
left : '-100%'}, 700, function() {
// Animation complete.);
$('.onoffswitch').addClass('nothere');
});
}
});
}
switchButton();
});
Please try and let me know.

jQuery works on only certain id tags

this is my html and my script as well. i know this is all really messy code so i apologize for that as i'm still learning. I would really appreciate some help with this issue. Thanks in advance
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#home" ).hover(
function(){
$(this).addClass("active");
},
function(){
$(this).removeClass("active");
}
);
$("#circle" ).hover(
function(){
$(this).addClass("active");
},
function(){
$(this).removeClass("active");
}
);
});
</script>
</head>
<body>
<p class="header"></p>
<p id="yellow"></p>
<p id="circle"></p>
<p id="body"></p>
<p id="body2"></p>
<p id ="logo"></p>
<p id="wood"></p>
<p id ="body3"></p>
<p id ="getintouch"></p>
<div >
<p id ="home">HOME</p>
<p id ="about">ABOUT</p>
<p id="contact">CONTACT</p>
</div>
<p id="circle1" class="circle"></p>
<p id="circle2" class="circle"></p>
<p id="circle3" class="circle"></p>
</body>
</html>
and this is my css
* { margin: 0; padding: 0; }
#font-face { font-family: Basic; src: url('fonts/basictitlefont.ttf'); }
.header{
position:realtive;
display: block;
width:100%;
min-height: 100px;
padding:0px;
margin:0px;
margin-top: 0px;
background-image: url(images/creamconcrete.png);
}
#yellow{
position:realtive;
display: block;
width:100%;
min-height: 15px;
background-color: ffa407;
padding:0px;
margin:0px;
z-index: 11;
}
#circle{
background-image: url(images/Counter.png);
background-size: 100%;
width: 100%;
min-height: 500px;
display: block;
position: relative;
margin:0px;
top:0px;
}
#body{
position:realtive;
display: block;
width:100%;
min-height: 500px;
background-color: white;
padding:0px;
margin:0px;
}
#body2{
position:realtive;
display: block;
width:100%;
min-height: 500px;
background-color: 494949;
padding:0px;
margin:0px;
}
#body3{
position:realtive;
display: block;
width:100%;
min-height: 200px;
background-color: white;
padding:0px;
margin:0px;
}
#logo{
width:100px;
height:100px;
top:60px;
left:90%;
border-radius: 50%;
background-color:6d6c6c;
position:absolute;
}
#wood{
background-image: url(images/woodshop.png);
background-size: 100%;
width: 100%;
min-height: 500px;
display: block;
position: relative;
margin:0px;
top:0px;
}
#getintouch{
width:500px;
height:200px;
top: 1760px;
position: absolute;
left: 50%;
transform: translatex(-50%);
border:solid 8px #6d6c6c;
}
#home{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#6d6c6c;
position: absolute;
top:40px;
left:10px;
}
#about{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#ffa407;
position: absolute;
top:40px;
left:200px;
}
#contact{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#ffa407;
position: absolute;
top:40px;
left:400px;
}
#logo{
width:100px;
height:100px;
top:60px;
left:90%;
border-radius: 50%;
background-color:6d6c6c;
position:absolute;
}
#circle1{
width:250px;
height:250px;
opacity:0.7;
top:225px;
left: 50%;
transform: translatex(-50%);
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
#circle2{
width:250px;
height:250px;
opacity:0.7;
top:225px;
left:70%;
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
#circle3{
opacity:0.7;
width:250px;
height:250px;
top:225px;
left:10%;
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
.highlighted {
background-color:#556677;
}
.active{
background-color: red;
}
This is probably a simple issue, but why does my script only run in the section for the id of home and not in the id of circle. I'm applying the same code and class to both but when i hover over my circle it doesn't change. whyyyyy

Are you talking about #circle specifically, or the other circle elements? If you're expecting this to work on #circle1, 2, and 3, it won't. You've added a class to those circle elements, so you'll need use a class selector instead.
$(".circle" ).hover( ... );
You'll also need to be aware of CSS specificity. Your .active selector will need to be at least as specific, if not more specific, in order for it to take effect. For example:
.active, #circle1.active, #circle2.active, #circle3.active {
background-color: red;
}
This is a pretty poor solution, which is why many people recommend avoiding the use of IDs and just using classes. If you switch those IDs to classes, you won't have to modify your .active selector. For example:
<p class="circle circle1"></p>
<p class="circle circle2"></p>
<p class="circle circle3"></p>
Then the CSS:
.circle1 { background-color: #ded7c9; }
.circle2 { background-color: #ded7c9; }
.circle3 { background-color: #ded7c9; }
.active { background-color: red; }
You can read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Also, if you aren't performing any logic on hover, then you don't need javascript. Just use the :hover pseudoclass in your CSS.

your active class Should Be like This
.active{
background-color: red !important;
}
The Background color of #circle is already applied to the Circle object
so Giving An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has.

The issue seems to be that you are not overwriting the background image. So you simply can't see the background color if the background graphic doesn't have any transparent parts,
.active{
background-color: red !important;
background-image: none !important;
}

Onclick event trigger another overlay div

I have a image, I want to add some effects. Hover overlay div I was able to add it. Now what I want to do is to add onclick event and change to another overlay div.
Here is my code, or see the CodePen Here
<div id="box">
<div id="overlay">
<span id="plus">+</span>
</div>
CSS:
body { background:#e7e7e7;}
#box { width:300px;
height:200px;
float: left;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
background:url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
background-size:cover;
border-radius:5px;
overflow:hidden;}
#overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;}
#box:hover #overlay {
opacity:1;}
#plus { font-family:Helvetica;
font-weight:900;
color:rgba(255,255,255,.85);
font-size:96px; }
I have only hover effect, when I click it should change Plus (+) to Minus (-) and at the bottom of the image div to appear a small div where will be placed a small description.
When the second overlay div is triggered, and I press back on Minus (-) it should change back. I will add here a image so that you can see what I'm trying to do.
In the image bellow you can see the blue div that should appear onclick event.

Firstly, the image appears to be content so it should inline HTML and not a background image and I have proceeded on that basis.
Forked Codepen Demo
Revised HTML
<div class="box">
<img src="http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg" alt="" />
<div class="overlay">
<h1 class="plus"></h1>
</div>
<div class="description">
<p>Lorem ipsum dolor.</p>
</div>
</div>
CSS wise, I have taken advantage of absolute positioning, pseudo elements and a little CSS3 transform to get everything in place. The latter allows flexibility in changing some font-sizing choices for the +/- and border sizes of pseudo element (the arrow).
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.box {
width:300px;
height:200px;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
border-radius:5px;
overflow:hidden;
position: relative;
}
.box img {
display: block;
}
.overlay {
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,.75);
text-align:center;
opacity:0;
-webkit-transition: opacity .25s ease;
}
.box:hover .overlay {
opacity:1;
}
.overlay .plus:before {
content:"+";
margin: 0;
padding: 0;
position: absolute;
top:50%;
left:50%;
font-family:Helvetica;
font-weight:900;
color:rgba(255,255,255,.85);
font-size:6rem;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
.overlay.clicked .plus:before {
content:"-";
}
.description {
display: block;
position: absolute;
width:100%;
height:30%;
background-color: lightblue;
bottom:-30%;
text-align: center;
transition: bottom 0.25s ease;
}
.description:after {
content:"";
position: absolute;
width:0;
height:0;
left:50%;
border-style:solid;
border-color: transparent transparent lightblue transparent;
border-width: 16px;
top:0;
-webkit-transform:translate(-50%, 100%);
}
.overlay.clicked + .description {
bottom:0%;
}
.overlay.clicked + .description:after {
-webkit-transform:translate(-50%, -100%);
}
Finally, a little JQuery to add a clicked (or active) interaction by way of .toggleClass.
Jquery
(function($) {
$(".plus").click(function () {
$(this).parent().toggleClass("clicked");
});
})(jQuery);

use jquery
$(document).ready(function(){
var trigger = $(".plus");
var overlay = $(".overlay");
trigger.click(function(){
overlay.toggle('fast');
})
});

CSS NavBar Transition Trouble

Im having trouble with my navigation bar hover effects specifically transitions(line 109/110). Essentially i want whichever link the mouse is hovering over to raise(margin increase of 2%) while the other links hold the margin of 0. The problem is that all the link margins increase by 2% whenever i hover on any of them. Its my first time posting so sorry for the messy code, if i broke any posting rules and/or if this question was unclear at all. I played around with it for abit and couldnt figure it out. Also if it is simpler i can figure out how to do it using javascript.
Cheers
<!DOCTYPE html>
<html>
<head>
<title>
Atticus Products
</title>
<script src="http://code.jquery.com
/jquery-1.9.1.js">
</script>
<script>
/*
$(document).ready(function(){
$("a").hover(function(){
$("a").animate({up:'250px'});
});
});
*/
</script>
<style>
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
font-size:100%;
background-color:#6ec247;
font-family: CaeciliaLTStd75Bold,Helvetica,Arial,Sans-serif;
}
#wrapper {
margin: 0 auto;
width: 50%;
height: 100%;
position: relative;
}
/*Header: Contains Logo and NavBar*/
#header {
border-bottom: 8px solid #f2f2f2;
overflow:hidden;
height: auto;
position:relative;
clear:both;
height:auto;
margin:0;
display:block;
}
#logoName {
max-width: 100%;
width:40%;
float:left;
height:150px;
}
#logoName a {
position:absolute;
bottom:0;
color:#FFFFFF;
text-decoration: none;
font-size:3em;
font-weight: bold;
}
/*NavBar*/
#nav {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
right:0;
width:60%;
float:right;
position:absolute;
bottom:0;
}
#nav li {
display: inline;
}
#nav li a {
display: inline-block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
font-size:1em;
margin-bottom:0;
}
#nav li a:hover {
color: #c00;
background-color: #000000;
opacity:0.5;
transition-property: margin-bottom;
transition-duration:4s;
margin-bottom:2%
/*this is where the problem is*/
}
/*Content: Contains Container1, LogoWords and Logo1*/
#content {
height: 60%;
text-align: center;
/*background-color: #4d8e2f;*/
color:#FFFFFF;
margin:0;
top:0;
display:relative;
font-weight: bold;
}
#container1 {
display: block;
max-width: 100%;
position:relative;
height:40.5%;
width:100%;
margin:0;
background-color:#6ec247 ;
z-index:0;
border-bottom: 8px solid #f2f2f2;
}
#logoWords{
z-index:1;
display:block;
position:absolute;
width:auto;
height:auto;
top:18.5%;
right:0;
color:#FFFFFF;
text-decoration: none;
font-size:2.5em;
font-weight: bold;
text-align:left;
}
#logo1 {
display:block;
z-index:1;
position:absolute;
left:0;
top:18.5%;
width:auto;
height:auto;
}
#content{
background-color:#6ec247 ;
}
#content p {
margin:0;
}
#footer {
height:10%;
width: 100%;
position: absolute;
bottom: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li>About</li>
<li>Our Approach</li>
<li>Careers</li>
<li>Contact</li>
</ul>
<div id="logoName">
Atticus <br>Products</br>
</div>
</div>
<div id="content">
<div id="container1">
</div>
<img id="logo1" src="image/justlogo.png" alt="logo" width="207"
height="214">
<div id="logoWords">
<p><br>We find the people</br> that make your company succeed</p>
</div>
<div id="content">
<p>
<br>Careers with Atticus</br>
</p>
</div>
</div>
<div id="footer">
<p>bam</p>
</div>
</div>
</body>
</html>

Your problem is in your jQuery.
Because you have $('a').animate it will effect every a element on the page.
You can get around this by changing 'a' to 'this' without quotation marks.
$(document).ready(function(){
$("a").hover(function(){
$(this).animate({up:'250px'});
});
});
This will only effect the element being hovered over.
Best of luck.