We Keep Coding

I tried creating a image popup but failed badly here my script anyone can help me out

hello all I am working on image popup that appears after clicking on banner I tried some basic js concept but failed badly . looking forward HELP pps
"""
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<a class="close" href="#">×</a>
</div>
</div>
<button href="#popup_flight_travlDil3" onclick="show('cover')">kk</button>
<a class="close_flight_travelDl" href="#">×</a>
<script>
$(function(){
$("button-link").click(function(){
$(".cover").fadeIn("300");
})
$(".cover,.close").click(function(){
$(".cover").fadeOut("300");
})
$(".contents").click(function(e){
e.stopPropagation();
})
})
</script>
<style>
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
z-index: 5;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: 30px;
right: 20px;
transition: all 200ms;
font-size: 95px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
</style>
"""
LOOKING FOR SOLUTION THAT REPLACE BUTTON WITH THE A CLASS LINK OR ANYOTHER WAY ROUND

replacing button with an img tag and adding eventListener to open or close the popup
let btn = document.querySelector(".btn");
let cover = document.querySelector(".cover");
let closebtn = document.querySelector(".close");
btn.addEventListener("click", () => {
cover.classList.toggle("active")
})
closebtn.addEventListener("click", () => {
cover.classList.remove("active")
})
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
margin-left: 100px;
z-index: 5;
}
.cover.active {
display: block;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: -10px;
right: 10px;
transition: all 200ms;
font-size: 65px;
font-weight: bold;
text-decoration: none;
color: #000000;
background-color: transparent;
border: none;
}
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<button class="close">×</button>
</div>
</div>
<img class="btn" src="https://images.unsplash.com/photo-1657299156538-e08595d224ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwzMXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt "">

Slot button with circle left and right

I am trying to create a button which is slot shaped.
It has a circle either on the left or right hand side.
However I am really struggling with the width and alignment of both the text and circle.
This is what I have right now:
.Buttons{
border-style: dotted ;
border-radius: 150px;
width: 300x;
height: 150px;
margin: 20px;
background-color:transparent;
text-align: left;
position: relative;
}
.circle {
width: 140px;
height: 140px;
-webkit-border-radius: 140px;
-moz-border-radius: 140px;
border-radius: 140px;
background: green;
}
.purple{
background:purple;
position: absolute;
border-radius: 100%;
left:400px;
top:3px;
}
.titelKleur{
color:rgb(51,180,231);
vertical-align: top;
top: 1px;
/*position:absolute;*/
}
.textKleur{
color:rgb(139,139,139);
font-size:16;
}
<button id=button1 value="0" class="Buttons">
<div id="circle" class="circle"></div>
<h1 class="titelKleur">Secure</h1><br>
<h4 class="textKleur">Security is importantSecurity is importantSecurity is important</h4>
</button><br>
<button id=button6 value="5" class="Buttons">
<h1 class="titelKleur">Fast</h1><br>
<h4 class="textKleur">Speed is importantSpeed is importantSpeed is important</h4>
<div id="circle" class="circle purple"></div>
</button>
This is basically what I like to achieve:
Rough paint drawing
The slots should have an equal width and the text should be centered vertically.
I later want to change the text by hover using jQuery, but that will be later on :p
Thanks in advance!
Koen

I have used display: flex on the button to properly align the items.
It wasn't clear from your question what should be done with titles. I have set them on the upper center.
.Buttons {
border-style: dotted;
border-radius: 150px;
width: 300x;
height: 150px;
margin: 20px;
background-color: transparent;
text-align: left;
position: relative;
display: flex;
}
.circle {
width: 140px;
height: 140px;
border-radius: 140px;
background: green;
align-self: center;
flex-shrink: 0;
}
.purple {
background: purple;
}
.titelKleur {
color: rgb(51, 180, 231);
top: 0px;
left: 50%;
transform: translateX(-50%);
position: absolute;
}
.textKleur {
color: rgb(139, 139, 139);
font-size: 16;
align-self: center;
padding: 5px;
}
<button id=button1 value="0" class="Buttons">
<div class="circle"></div>
<h1 class="titelKleur">Secure</h1><br>
<h4 class="textKleur">Security is importantSecurity is importantSecurity is important</h4>
</button><br>
<button id=button6 value="5" class="Buttons">
<h1 class="titelKleur">Fast</h1><br>
<h4 class="textKleur">Speed is importantSpeed is importantSpeed is important</h4>
<div class="circle purple"></div>
</button>

Dropdown won't work when hovering nav bar

I've been having a problem with a dropdown menu option. The thing refuses to display when I hover "Store". I've already tried in different ways (in some I was almost lucky, in others not so much) but in the end nothing really worked for me.
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("tituloh").style.fontSize = "15px";
document.getElementById("tituloh").style.marginBottom = "70px";
document.getElementById("tituloh").style.top = "20px";
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "47px";
} else {
document.getElementById("tituloh").style.fontSize = "30px";
document.getElementById("tituloh").style.top = "35px";
document.getElementById("tituloh").style.marginBottom = "100px"
document.getElementById("header").style.paddingBottom = "0px";
document.getElementById("remove").style.top = "50px";
}
}
#body {
margin: 0px;
}
#remove {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
}
.order {
display: inline-block;
}
#remove .opt {
display: inline-block;
color: white;
text-align: center;
font-size: 24px;
padding: 14px 16px;
background-color: black;
text-decoration: none;
}
#remove .opt:hover,
.dropmenu:hover .dropbutton {
background-color: white;
color: black;
}
.dropmenu {
float: right;
}
.dropmenu .dropbutton {
font-size: 24px;
border: none;
outline: none;
color: white;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropcont {
position: absolute;
background-color: white;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
display: none;
}
.dropcont .dropitem {
text-decoration: none;
width: 150px;
height: 30px;
margin: 5px 0;
padding-top: 5px;
padding-left: 5px;
display: inline-block;
text-align: left;
}
.dropcont a {
text-decoration: none;
color: black;
font-size: 24px;
}
.dropcont a:hover {
text-decoration: underline;
transition: 0.5s;
}
.dropmenu:hover .dropcont {
display: block;
}
#header {
left: 0;
top: 0;
text-align: center;
padding: 20px 5px;
padding-bottom: 0px;
position: fixed;
width: 100%;
margin: 0px;
padding-left: 0px;
transition: 0.2s;
background-color: black;
background-image: url(header/AvettBrothers-loja.jpg);
background-repeat: no-repeat;
background-position: 0 10%;
background-size: cover;
z-index: 1;
}
#tituloh {
position: relative;
top: 35px;
text-shadow: -5px 5px 10px #000000;
font-size: 30px;
color: white;
transition: 0.3s;
margin-bottom: 100px;
}
.sales {
margin-top: 300px;
}
.thumbnails {
width: 50%;
margin: 0 auto;
text-align: center;
}
#tshirts,
#casacos,
#posters,
#acessorios,
#projects,
#kids {
position: relative;
display: inline;
border: solid red;
padding: 20px 0;
margin-bottom: 100px;
}
img.contrast {
margin: 20px 10px;
filter: contrast(70%) opacity(90%);
border: solid blue;
}
.textimgcentro {
position: absolute;
left: 0;
top: -150%;
width: 100%;
font-size: 30px;
text-align: center;
color: white;
text-shadow: -10px 5px 10px #000000;
border: solid black;
}
#top {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" ; http-equiv="refresh" content="5">
<title>Loja</title>
<link rel="stylesheet" type="text/css" href="loja/loja.css">
<script type="text/javascript" src="loja/loja.js"></script>
</head>
<body>
<div id="header">
<div id="tituloh">
<h1>Store</h1>
</div>
<ul id="remove">
<li class="order">Home</li>
<li class="order">About</li>
<li class="order">Albuns</li>
<li class="order">Tours</li>
<li class="dropmenu, order">
<a href="#link" class="dropbutton, opt">
Store
</a>
<div class="dropcont">
T-Shirts<br>
Jackets<br>
Posters<br>
Accessories<br>
Side Projects<br>
Kids<br>
</div>
</li>
<li class="order">Forum</li>
</ul>
</div>
<br/>
<br/>
<br/>
<div class="sales">Sales</div>
<div class="thumbnails">
<div id="tshirts">
<img src="loja/thumbnails/tshirts.jpg" class="contrast">
<div class="textimgcentro">
T-Shirts
</div>
</div>
<div id="casacos">
<img src="loja/thumbnails/casacos.jpg" class="contrast">
<div class="textimgcentro">
Jackets
</div>
</div>
<div id="posters">
<img src="loja/thumbnails/posters.jpg" class="contrast">
<div class="textimgcentro">
Posters
</div>
</div>
<div id="acessorios">
<img src="loja/thumbnails/acessorio.jpg" class="contrast">
<div class="textimgcentro">
Accessories
</div>
</div>
<div id="projects">
<img src="loja/thumbnails/project.jpg" class="contrast">
<div class="textimgcentro">
Side Projects
</div>
</div>
<div id="kids">
<img src="loja/thumbnails/kids.jpg" class="contrast">
<div class="textimgcentro">
Kids
</div>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<div class="bestsell">
<div id="top">
<h1>Top Products</h1>
</div>
</div>
<hr id="cont"> Contactos Oficiais: <br /><br />
<img src="loja/Contactos/facebook.png" ; height="50" ; width="50" ; title="Facebook" ; alt="Link para Facebook">
<img src="loja/Contactos/insta.png" ; height="50" ; width="50" ; title="Instagram" ; alt="Link para Instagram">
<img src="loja/Contactos/twitter.png" ; height="50" ; width="50" ; title="Twitter" ; alt="Link para Twitter">
</body>
</html>
How can I fix this?
Also, how do I make it so that, while hovering the dropdown menu, "Store" remains with a white background and black text?
Thank you!

Why do my link not work after adding negative margin to nav?

I was make a Jquery function to make the navigation bar stick to the top of the page when scrolled past the header.
To make it look smooth I had to add padding-top:110px to the content div and margin-bottom: -80px to the nav div. Now my links do not work.
Any guesses to why? And how can I fix this to get everything in order?
$(document).ready(function() {
var stickyNavTop = $('.nav').offset();
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop.top) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
html,
body {
height: 100%;
position: relative;
}
#body {
width: 80%;
min-height: 100%;
border: 1pxcenter;
margin: 0 auto;
}
#header {
width: 100%;
height: 40%;
border: 1px dotted blue;
margin: auto;
}
.nav {
margin-bottom: -80px;
border: 1px solid black;
width: 100%;
height: 80px;
z-index: 1;
position: -webkit-sticky;
}
a:visited {
color: black;
}
a:hover {
color: yellow;
}
a:active {
color: green;
}
#link {
height: 100%;
width: 20%;
display: inline-block;
float: left;
border: 1px dotted green;
text-decoration: none;
text-align: center;
padding: none;
}
.sticky {
border: 1px solid black;
position: fixed;
width: 80%;
top: 0;
z-index: 100;
border-top: 0;
}
.nav div p {
padding-top: 10px;
font-size: 1em;
}
#content {
border: 1px solid green;
position: relative;
padding-top: 110px;
padding-bottom: 100px;
display: block;
width: 100%;
max-height: 100%;
margin: none;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<h1>FrontYard Fairways</h1>
<h2>"Fairways at a fair price"</h2>
</header>
<nav class="nav">
<a href="FYFHome.html">
<div id="link">
<p>Home</p>
</div>
</a>
<a href="Services.html">
<div id="link">
<p>Services</p>
</div>
</a>
<a href="Customers.html">
<div id="link">
<p>Our Customers</p>
</div>
</a>
<a href="About.html">
<div id="link">
<p>About</p>
</div>
</a>
<a href="Contact.html">
<div id="link">
<p>Contact</p>
</div>
</a>
</nav>
<main id="content">
<div>
<p>
Blahblahablahahlahablhablahablhaab lahablhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab
lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha
blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla
hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl
ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha
blahahlahablhablahablh aablahablhablahablahablahablahBla hblahablahahlahablhablahablhaablahablhablahablahablahablah Blahblahablahahlahablhablahablhaab lahablhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb
lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah
Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl
ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab
ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha
blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha blahahlahablhablahablh aablahablhablahablahablahablahBla
hblahablahahlahablhablahablhaablahablhablahablahablahablah
</p>
</div>
</main>

You have overlapping (invisible) elements from your content that covers your links.
The following CSS:
#content{
padding-top: 110px;
}
forces your content to sit on top of your navigation links blocking them from being clicked.
There are several solutions to this. One way to confirm that this is the case is to remove
#content{
padding-top: 110px;
}
and replace it with
#content{
position:relative;
top:110px;
}
A better way to debug the issue is to open Chrome DevTools and inspecting the #content div to see where the box model overlaps your links and adjust accordingly.

I removed the negative margins applied to the main element, to your nav bar, and removed the height of your header. And also some little other things.
$(document).ready(function() {
var stickyNavTop = $('.nav').offset();
var stickyNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop.top) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
html,
body {
height: 100%;
position: relative;
}
#body {
width: 80%;
min-height: 100%;
border: 1pxcenter;
margin: 0 auto;
}
#header {
width: 100%;
/* height: 40%; => that makes your header overlapping with your nav bar*/
border: 1px dotted blue;
margin: auto;
}
.nav {
border: 1px solid black;
width: 100%;
height: 80px;
z-index: 1;
/*
the support of position:sticky is bad: http://caniuse.com/#feat=css-sticky
position: -webkit-sticky;
*/
background: rgba( 255,255,255,0.9);
transition: width 0.5s;
}
a:visited {
color: black;
}
a:hover {
color: yellow;
}
a:active {
color: green;
}
#link {
height: 100%;
width: calc(20% - 1px );;
display: inline-block;
float: left;
border: 1px dotted green;
border-right-width: 0;
text-decoration: none;
text-align: center;
padding: none;
}
.sticky {
border: 1px solid black;
position: fixed;
width: 80%;
top: 0;
border-top: 0;
}
.sticky + #content{
margin-top:80px
}
.nav div p {
padding-top: 10px;
font-size: 1em;
}
#content {
border: 1px solid green;
padding-top:1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
<h1>FrontYard Fairways</h1>
<h2>"Fairways at a fair price"</h2>
</header>
<nav class="nav">
<a href="FYFHome.html">
<div id="link">
<p>Home</p>
</div>
</a>
<a href="Services.html">
<div id="link">
<p>Services</p>
</div>
</a>
<a href="Customers.html">
<div id="link">
<p>Our Customers</p>
</div>
</a>
<a href="About.html">
<div id="link">
<p>About</p>
</div>
</a>
<a href="Contact.html">
<div id="link">
<p>Contact</p>
</div>
</a>
</nav>
<main id="content">
<div>
<p>
Blahblahablahahlahablhablahablhaab <br/><br/><br/><br/><br/><br/>
lhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab
lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha
blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla
hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl
ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha
blahahlahablhablahablh aablahablhablahablahablahablahBla hblahablahahlahablhablahablhaablahablhablahablahablahablah Blahblahablahahlahablhablahablhaab lahablhablahablahabla hablahBlahblahablaha hlahablhablahablhaablahablhablahablahablahablahBlahb
lahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahabl haablahablhab lahablahablahablahBlahblahablahahlahablhablahab lhaablahablhablahabl ahablahablahBlahblahabl ahahlaha hablahablhaablahablhablahabla blahablahablah
Blahblahablahahlahablhabl ahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahablahablah ablahBlahbl hablahahlahablhablahablhaablahablha blahablahablahablahBlahblahablahahlahablhablahablhaab lahablhablahab lahablahBl
ahblahablahahla hablhablahablh aablahablhablahablahablahablahBlahblahablahah lahablhablahablhaablahablhablahablaha blahablahBlahbla hablahahlahablhablahablhaablahablhablahablahablahablahBla hblahablahahlahablhablah ablhaablahablhablahablahablahablahBlahblahab
ahahlahablhablahablh aablahablhablahablahablahablahBla hblahablaha hlahablhablahablhaablahablhablahab lahablahablahBlahblahablahahlahablhablahablhaa blahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhabl ahablahablahablahBlahblahablahahlahablhablahablhaablahablhablaha
blahablahablahB lahblahablahahlahablhablahablhaablahablhablahablahablahablahBlahblahablahahlahablhablahablhaablahablhablahablahablah ablahBlahblahablahahlah abl ha lahablh aablahablhablahablahablahablahBlahblaha blahahlahablhablahablh aablahablhablahablahablahablahBla
hblahablahahlahablhablahablhaablahablhablahablahablahablah
</p>
</div>
</main>

Absolute Positioned DIVs are not visible

I have two DIVs (previous-image and next-image) that are absolutely positioned. Here is my structure:
<div id="sheet" onclick="close()">
<div id="popover">
<div id="previous-image" onclick="previous()">«</div>
<img src="http://cynthiawoodyardlandscapedesign.com/watermark.php?src=images/main1.jpg&x=0&y=470&opacity=50" id="popover-image" />
<div id="next-image" onclick="next()">»</div>
</div>
</div>
Link: http://cynthiawoodyardlandscapedesign.com/
Here is my CSS:
#next-image {
position: absolute;
right: -100px;
top: 250px;
text-align: center;
line-height: 50px;
font-size: 50px;
-webkit-text-stroke: 1px black;
-moz-text-stroke: 1px black;
height: 50px;
width: 50px;
z-index: 200;
background: transparent;
color: white;
}
#previous-image {
position: absolute;
left: -100px;
top: 250px;
text-align: center;
line-height: 50px;
z-index: 200;
font-size: 50px;
-webkit-text-stroke: 1px black;
-moz-text-stroke: 1px black;
height: 50px;
width: 50px;
background: transparent;
color: white;
}
My JavaScript:
$("#sheet").click(function() {
$("#sheet").animate({
opacity: 0
}, 200, function() {
$("#sheet").hide();
});
});

Edit
Seems you had omitted the actual HTML of your #sheet element, which has a display: none set on the element, and therefore all is invisible inside the sheet element, including the arrows.
Your actual HTML on your site is:
<div id="sheet" onclick="close()" style="display: none;">
<div id="popover" onclick="close()">
<div id="previous-image" onclick="previous()">«</div>
<img src="watermark.php?src=images/main1.jpg&x=0&y=420&opactity=50"
id="popover-image" onclick="close()">
<div id="next-image" onclick="next()">»</div>
</div>
</div>
Removing that style="display: none;" will show the arrows again.