lightbox erro (imagem abre ao fundo)

Wictor Menkalha · Novembro 14, 2017

Fala galera, sou novo aqui mais quem sabe alguém pode me ajuda, estou programando um site aqui e esta dando um erro na lightbox, ela esta abrindo ao fundo. (imagem em anexo)

alem de esta abrindo ao fundo do background ela esta grande demais

segue o código usado:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Supermercado Marinho</title>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="vendor/css/style.css" />
<link href="path/to/lightbox.css" rel="stylesheet">

<style type="text/css">
.galeria img{
   width: 50%;
   padding: 15px;


}

.galeria img:hover{
cursor: pointer;
}

/*estilo do bg*/
.bg{
   position: absolute;
   background-color: #333;
   opacity: 0;
   top: 0px;
   left: 0px;
   display: none;
   height: 100%;
   width: 100%;


}
.lb{
position: relative;
top: 10%;
left: 25%;
display: none;
border:10px solid #fff;
box-shadow: 2px 2px 12px #333;
background:#fff;
text-align: center;
.lb
{z-index: 1000;}

}
.lb img{
opacity: 0;
width: 100%;
height: 100%;
}

/*botão fechar*/

.close{
   color: #fff;
   background-color: #000;
   width: 20px;
   height: 15px;
   text-align: center;
   position: absolute;
   right: -5px;
   bottom: -20px;
   padding: 0 auto;

}

.close:hover{

cursor: pointer;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Baumans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet">

<body>

<div id="container" class="container">
<div id="page" class="container-fluid">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="vendor/images/logo.png" /></a>
</div>

<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav navbar-right">
<li><a href="empresa.html">EMPRESA</a></li>
<li><a href="ofertas.html">OFERTAS</a></li>
<li><a href="fotos.html">FOTOS</a></li>
<li><a href="receitas.html">RECEITAS</a></li>
<li><a href="contato.html">CONTATO</a></li>
</ul>
</div>
</div>
</nav>

<script type="text/javascript" src="jquery-1.12.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.galeria img').click(function(){
$('.bg').animate({'opacity':'0.60'}, 500, 'linear');
$('.bg, .lb').css('display','block');

var big = $(this).attr('src');

$('.lb img').attr('src', big);
$('.lb img').animate({'opacity':'1.00'},1500, 'linear');
});

$('.close').click(function(){
       $('.lb img').css('opacity','0');
       $('.bg, .lb').css('display','none');

});

});
</script>
</head>

<div class="lb">
       <img src=""/>
       <div class="close">FECHAR</div>
   </div>
<div id="footer" class="container-fluid">
<div style="height:35%; width: 100%; display: inline-block;"></div>
<div id="footerContent">
<div class="footerItem col-md-2 col-xs-6">
<h4>LOJAS FÍSICAS</h4>
<ul>
<li><a href="">Sobre o Marinho</a></li>
<li><a href="">Missão e Valores</a></li>
<li><a href="">Código de Ética</a></li>
<li><a href="">RH - Trabalhe Conosco</a></li>
<li><a href="">Concessões</a></li>
<li><a href="">Ofertas</a></li>
<li><a href="">Sustentabilidade</a></li>
<li><a href="">Imprensa</a></li>
</ul>
</div>
<div class="footerItem col-md-3 col-xs-6">
<h4>MARINHO FEST 11</h4>
<ul><p>
<li><a href="">Conheça o Programa</a></li>
<li><a href="">Parceiros</a></li>
<li><a href="">Cupom</a></li>
<li><a href="">Lojas</a></li>
<li><a href="">Regulamento</a></li>
<li><a href="">Perguntas Frequentes</a></li>
<li><a href="">Contato</a></li></p>
</ul>
</div>
<div class="footerItem col-md-3">
<h4>ATENDIMENTO</h4>
<p>Nosso horário de atendimento é das 8 as 20h, de segunda a sábado.</p>
<h2>32 3741-2809</h2>
<p>Matriz</p>
<h2>32 3741-2345</h2>
<p>Filial</p>
</div>
<div class="footerItem col-md-4">
<h4>SIGA-NOS NAS REDES SOCIAIS.</h4>
<ul>
<li><a href=""><img src="vendor/images/faceIco.png" /> Fique por dentro das novidades. </a></li>
<li><a href=""><img src="vendor/images/instaico.png" /> Conheça nossos produtos.</a></li>
<li><a href=""><img src="vendor/images/youtubeico.png" /> Acompanhe nosso canal.</a></li>
<li><a href=""><img src="vendor/images/twiterico.png" /> Fale com a gente.</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="vendor/bootstrap/js/jquery-3.2.1.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/bootstrap/js/npm.js"></script>
<script src="path/to/lightbox.js"></script>
</body>
</html>