I have a screen that when I clicked the button it moves "x" px, the problem and when it does this effect, I have to send the screen that is below, what happens and the letters on the screen below overlap top screen. I used the z-index worked, plus all my links from the bottom screen stopped working.
HTML
<body>
<!-- TELA DE APRESENTAÇÃO INICIAL -->
<div class="container1">
<div class="left" id="content2"><img src="img/logo.png" class=""></div>
<div class="right" id="content">
<!-- BOX SERVIÇOS -->
<div class="box hover-zoomin">
<a id="animate" class="box-1 btn-toggle" data-element="#minhaDiv">
<img src="img/service.jpg" class="box-1">
<div class="titulo">
<i class="fas fa-briefcase pos-icone"></i>
<h1 class="pos-titulo">Serviços</h1>
</div>
</a>
</div>
<!-- BOX PORTIFOLIO -->
<div class="box hover-zoomin">
<a href="" class="box-1" id="animate2">
<img src="img/portfolio.jpg" class="box-1">
<div class="titulo">
<i class="fas fa-handshake pos-icone"></i>
<h1 class="pos-titulo">Sobre nós</h1>
</div>
</a>
</div>
<!-- BOX CONTATOS -->
<div class="box hover-zoomin">
<a href="" class="box-1" id="animate3">
<img src="img/contact.jpg" class="box-1">
<div class="titulo">
<i class="fas fa-phone pos-icone"></i>
<h1 class="pos-titulo">Contatos</h1>
</div>
</a>
</div>
<!-- BOX SOBRE -->
<div class="box hover-zoomin">
<a href="" class="box-1" id="animate4">
<img src="img/about.jpg" class="box-1">
<div class="titulo">
<i class="fas fa-star pos-icone"></i>
<h1 class="pos-titulo">Portifolio</h1>
</div>
</a>
</div>
</div>
</div>
<!-- FINAL DA TELA DE APRESENTAÇÃO -->
<!-- TELA DE SERVIÇOS -->
<div class="container-fluid" id="minhaDiv" style="opacity: 0; display: none;">
<div class="row">
<div class="col-2 img-servico d-none d-lg-block">
<a href="#" id="fechar"><i class="fas fa-times fa-2x icone-close"></i></a>
</div>
<div class="col-lg-10 col-md-12">
<div class="row">
<div class="col-12 my-4">
<h1 class="text-center display-4">AQUI VAI O <span class="text-danger">TITULO</span></h1>
</div>
</div>
<div class="row pad justify-content-center">
<!-- <div class="text-center"> -->
<div class="col-12 col-md-6 text-center">
<!-- IMAGEM DO VIDEO -->
<img src="img/infinity.jpg" class="rounded" style="height: 100%; width: 100%;">
<!-- ICONE DO VIDEO -->
<a class="venobox" data-autoplay="true" data-vbtype="video" href="https://www.youtube.com/watch?v=p6-WUWmV-fg" style="position: absolute; top: 40%; right: 43%;"><i class="fab fa-youtube fa-4x cor-icone"></i></a>
</div>
<div class="col-12 col-md-6">
<h4 class=""><strong>TITULO</strong></h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
</div>
<!-- </div> -->
</div>
<div class="row pad my-5">
<div class="col-12 col-md-4">
<div class="card border border-danger py-5 px-3 text-center">
<img src="img/1.png" style="position: absolute; top: 0px; right: 0px; width: 30%;">
<img src="img/ideia.png" class="mx-auto" style="width: 70px;">
<!-- <i class="far fa-user text-center m-5 p-5 fa-3x rounded " style="background-color: red; color: white;"></i> -->
<p class="text-center mt-5"><strong>USUARIOS 1250</strong></p>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card border border-danger py-5 px-3 text-center">
<img src="img/1.png" style="position: absolute; top: 0px; right: 0px; width: 30%;">
<img src="img/ideia.png" class="mx-auto" style="width: 70px;">
<!-- <i class="far fa-user text-center m-5 p-5 fa-3x rounded " style="background-color: red; color: white;"></i> -->
<p class="text-center mt-5"><strong>USUARIOS 1250</strong></p>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card border border-danger py-5 px-3 text-center">
<img src="img/1.png" style="position: absolute; top: 0px; right: 0px; width: 30%;">
<img src="img/ideia.png" class="mx-auto" style="width: 70px;">
<!-- <i class="far fa-user text-center m-5 p-5 fa-3x rounded " style="background-color: red; color: white;"></i> -->
<p class="text-center mt-5"><strong>USUARIOS 1250</strong></p>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<h1 class="text-center display-4">TITULO</h1>
</div>
</div>
<div class="row justify-content-center">
<div class="col-10">
<div class="row">
<div class="col-3">
<div class="text-center">
<img src="img/usuario1.jpg" class="img-fluid rounded-circle" width="140px;">
<h5>Lorem ipsum</h5>
</div>
</div>
<div class="col-3">
<div class="text-center">
<img src="img/usuario1.jpg" class="img-fluid rounded-circle" width="140px;">
<h5>Lorem ipsum</h5>
</div>
</div>
<div class="col-3">
<div class="text-center">
<img src="img/usuario1.jpg" class="img-fluid rounded-circle" width="140px;">
<h5>Lorem ipsum</h5>
</div>
</div>
<div class="col-3">
<div class="text-center">
<img src="img/usuario1.jpg" class="img-fluid rounded-circle" width="140px;">
<h5>Lorem ipsum</h5>
</div>
</div>
</div>
</div>
<div class="col-10">
<div class="row">
<div class="col-3">
<div class="text-center">
<img src="img/usuario1.jpg" class="img-fluid rounded-circle" width="140px;">
<h5>Lorem ipsum</h5>
</div>
</div>
<div class="col-3">
<div class="text-center">
<img src="img/usuario1.jpg" class="img-fluid rounded-circle" width="140px;">
<h5>Lorem ipsum</h5>
</div>
</div>
<div class="col-3">
<div class="text-center">
<img src="img/usuario1.jpg" class="img-fluid rounded-circle" width="140px;">
<h5>Lorem ipsum</h5>
</div>
</div>
<div class="col-3">
<div class="text-center">
<img src="img/usuario1.jpg" class="img-fluid rounded-circle" width="140px;">
<h5>Lorem ipsum</h5>
</div>
</div>
</div>
</div>
</div>
<div class="row my-5">
<div class="col-12">
<div class="text-center">
<h1 class="display-4">Lorem ipsum dolor sit</h1>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<button class="btn btn-primary p-3">Conheça mais</button>
</div>
</div>
</div>
<div class="row">
<div class="col-12 img-footer">
<p class="py-3 text-white">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Roboto Condensed', sans-serif;
}
/* =================== FONTE PARA TITULOS =================== */
h1, h2, h3, h4, h5{
font-family: 'Roboto Condensed', sans-serif;
}
/*=================== CONTAINER 1 ======================================*/
/*CONTAINER DA 1° TELA*/
.container1{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
/*z-index: 100;*/
}
.left {
position: relative;
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
.right {
position: relative;
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.box {
width: 50%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.box-1 {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/*=================== IMAGEM DE FUNDO =================== */
.img-servico{
background-image: url(img/service.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
height: auto;
}
.img-servico:hover{
cursor: pointer;
}
/*=================== IMAGEM DE FUNDO DO VIDEO ===================*/
.img-video{
background-image: url(img/infinity.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
border-radius: 5px;
width: auto;
}
/*=================== IMAGEM DE FUNDO DO CARD*/
.img-card{
background-image: url(img/1.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
}
/* IMAGEM DE FUNDO DO CARD 2 ===================*/
.img-card-2{
background-image: url(img/2.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
}
/*IMAGEM DE FUNDO CARD 3 ===================*/
.img-footer{
background-image: url(img/service.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
}
/*=================== QUEBRA DE LINHA ===================*/
@media screen and (max-width:768px) {
.container1 {
flex-direction: column;
}
.left, .right {
width: 100%;
}
.left{
height: 40%;
}
.right{
height: 60%;
}
.left-2{
display: none;
}
.pad{
padding-right: 0px;
padding-left: 0px;
}
}
/* ================================== EFEITO DE ZOOM ==============================*/
/*ZoomIn Hover Effect*/
.hover-zoomin a {
/*display: block;*/
position: relative;
overflow: hidden;
cursor: pointer;
}
.hover-zoomin img {
width: 100%;
height: 100%;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hover-zoomin:hover img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
/* ================================== FINAL EFEITO DE ZOOM ==============================*/
/* ====================================== CONFIGURAÇÃO DO ICONE ======================*/
.titulo{
position: absolute;
}
.pos-titulo{
color: white;
font-size: 3rem;
margin-right: 10px;
margin-top: 10px;
}
.pos-icone{
color: white;
font-size: 4rem;
margin-left: 65px;
margin-bottom: -10px;
}
/* ====================================== FINAL DA CONFIGURAÇÃO DO ICONE ======================*/
/* ====================================== MARGEM DO BOTÃO FECHAR ======================*/
.close{
margin: 10px;
color: white;
font-size: 30px;
z-index: 10;
}
.close:hover{
cursor: pointer;
}
/* ====================================== FINAL MARGEM DO BOTÃO ======================*/
/* ====================================== ESPAÇAMENTO DA PAGINA PRINCIPAL /* ======================================*/
.pad{
padding-left: 3rem;
padding-right: 3rem;
}
/*====================================== ESCONDE A TELA ======================================*/
.sumir{
display: none;
}
/*====================================== COR DO ICONE DO VIDEO ======================================*/
.cor-icone{
color: #F33F3F;
}
.cor-icone:hover{
color: red;
}
/* ===================================== CONFIGURAÇÃO DO ICONE DE FECHAR ============================*/
.icone-close{
position: absolute;
left: 80%;
top: 10px;
color: rgba(255, 255, 255, 0.5);
}
.icone-close:hover{
color: white;
}
JS
<script>
$(document).ready(function() {
$("#animate").click(function() {
$('#content').animate({
"left": "100%"
}, 1500);
$('#content2').animate({
"right": "100%"
}, 1500);
$('#minhaDiv').animate({
"opacity": "1"
}, 1000);
});
});
</script>
<script>
$(document).ready(function() {
$("#fechar").click(function() {
$('#content').animate({
"left": "0%"
}, 1500);
$('#content2').animate({
"right": "0%"
}, 1500);
$('#minhaDiv').animate({
"opacity": "0"
}, 1000);
$('#minhaDiv').addClass("sumir");
});
});
</script>
<!-- APARECER TELA DE BAIXO -->
<script type="text/javascript">
$(function() {
$(".btn-toggle").click(function(e) {
e.preventDefault();
el = $(this).data('element');
$(el).toggle();
});
});
</script>
<!-- INICIALIZAÇÃO DO PLUGIN - MODAL VIDEO(VENOBOX) -->
<script type="text/javascript">
$(document).ready(function() {
$('.venobox').venobox();
'insira o código aqui'
});
$("#firstlink").venobox().trigger('click');
</script>