0
I have a screen that when clicked on the button it walks "x" px, the problem and when it does this effect, I have to send the screen that appears below, what happens and that the letters of the screen below overlaps the screen above. I used the z-index worked, but all my lower screen links 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>
It has to put only the snippets of code involved and no images to better analyze?
– Laércio Lopes
Where you put the z-index that worked?
– Sam
I put the z-index in the container1 class
– Roney Berti
"the links" you refer to are the 4 images, two above and two below?
– Sam
this is actually only working the link that this written "services", when I click on this image, the screen divides and appears the bottom screen, and as said it overlap the top.
– Roney Berti
Actually it is not overwriting no. By clicking, the screen goes up and the links are animated out of the screen.
– Sam
more while the links(images) are leaving the screen, you noticed that the screen below appears on the top.
– Roney Berti
I could not notice no. The only thing I see are the images that were there coming out the side of the screen rs
– Sam
I guess you’d have to put a screen print before and after.
– Sam
guy got it here, put the z-index in the left class and right, now do not overlap and the links below keep working.
– Roney Berti
I don’t know if I understand, but put z-index on everything that appears on top. To be sure, use a ! Import =S
– Juliana Martins