0
Hello, I am developing a website and found the following problem: I used a box that I thought was cool in this Video, however, when the box started to be responsive it covered the entire page elements. So I used "@medias" and gave "padding-top" to adjust the images according to the resolution of each device, but when I create any content under this box, these contents overlap the box or box overlap these contents. He wanted help so that the Box in question did not invade other content and that I did not need to give "padding-top" to each resolution, grateful.
/*Cursos*/
.BoxGeral
{
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
width: 1000;
height: 0;
display: flex;
}
.BoxGeral .BoxCursos
{
background: black;
position: relative;
width: 250px;
height: 500px;
background: #ccc;
transition: 0.5s;
}
.BoxGeral .BoxCursos:hover
{
transform: scale(1.1);
z-index: 1;
box-shadow: 0 5px 20px rgba(0,0,0,1);
}
.BoxGeral .BoxCursos .ImagensCaixa
{
position: absolute;
width: 100%;
height: 250px;
overflow: hidden;
}
.BoxGeral .BoxCursos:nth-child(odd) .ImagensCaixa
{
bottom: 0;
left: 0;
}
.BoxGeral .BoxCursos .ImagensCaixa img
{
width: 100%;
}
.BoxGeral .BoxCursos .Detalhes
{
position: absolute;
width: 100%;
height: 250px;
overflow: hidden;
background: #262626;
}
.BoxGeral .BoxCursos:nth-child(even) .Detalhes
{
bottom: 0;
left: 0;
}
.BoxGeral .BoxCursos:nth-child(1) .Detalhes
{
background: #6adc5e;
}
.BoxGeral .BoxCursos:nth-child(2) .Detalhes
{
background: #345a30;
}
.BoxGeral .BoxCursos:nth-child(3) .Detalhes
{
background: #6adc5e;
}
.BoxGeral .BoxCursos:nth-child(4) .Detalhes
{
background: #345a30;
}
.BoxGeral .BoxCursos:nth-child(5) .Detalhes
{
background: #6adc5e;
}
.BoxGeral .BoxCursos:nth-child(6) .Detalhes
{
background: #345a30;
}
.BoxGeral .BoxCursos .Detalhes .Conteudo
{
position: absolute;
top: calc(50% + 16px);
transform: translateY(-50%);
width: 100%;
padding: 20px;
box-sizing: border-box;
text-align: center;
transition: 0.25s;
}
.BoxGeral .BoxCursos:hover .Detalhes .Conteudo
{
top: calc(50%);
}
.BoxGeral .BoxCursos .Detalhes .Conteudo .fas
{
font-size: 80px;
color: #fff;
}
.BoxGeral .BoxCursos .Detalhes .Conteudo h3
{
font-size: 15px;
margin: 0;
padding: 0;
padding: 10px 0;
color: #fff;
}
.BoxGeral .BoxCursos .Detalhes .Conteudo a
{
display: inline-block;
padding: 5px 20px;
color: #fff;
border: 2px solid #fff;
text-decoration: none;
transition: 0.5s;
border-radius: 20px;
transform: scale(0);
box-shadow: 0 0 20px #eee;
background-position: right;
cursor:pointer;
}
.BoxGeral .BoxCursos:hover .Detalhes .Conteudo a
{
transform: scale(1);
}
.BoxGeral .BoxCursos .Detalhes .Conteudo a:hover
{
background: #fff;
color: #262626;
}
@media(max-width: 1000px)
{
.BoxGeral
{
padding-top: 80%;
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.BoxGeral .BoxCursos
{
height: 250px;
}
.BoxGeral .BoxCursos .ImagensCaixa
{
display: none;
}
}
@media(max-width: 768px)
{
.BoxGeral
{
display: initial;
padding-top: 10%;
}
.BoxGeral .BoxCursos .ImagensCaixa
{
display: none;
}
.Eventos
{
padding-top: 40%;
}
}
@media(max-width: 480px)
{
.BoxGeral
{
padding-top: 130%;
top: 0;
left: 0;
transform: translate(0);
}
.Eventos
{
padding-top: 250%;
}
}
@media(max-width: 375px)
{
.BoxGeral
{
padding-top: 160%;
}
.Eventos
{
padding-top: 300%;
}
}
@media(max-width: 320px)
{
.BoxGeral
{
padding-top: 200%;
}
.Eventos
{
padding-top: 360%;
}
}
/*Cursos*/<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--BoxDeCursos-->
<div class="BoxGeral container">
<div class="BoxCursos">
<div class="ImagensCaixa">
<img src="img/BoxCursos/dev.jpg">
</div>
<div class="Detalhes">
<div class="Conteudo">
<i class="fas fa-laptop-code"></i>
<h3>Análise e Desenvolvimento de Sistemas</h3>
<a href="#" data-toggle="modal" data-target="#dev">Sobre</a>
</div>
</div>
</div>
<div class="BoxCursos">
<div class="ImagensCaixa">
<img src="img/BoxCursos/adm.jpg">
</div>
<div class="Detalhes">
<div class="Conteudo">
<i class="fas fa-book"></i>
<h3>Administração</h3>
<a href="#" data-toggle="modal" data-target="#adm">Sobre</a>
</div>
</div>
</div>
<div class="BoxCursos">
<div class="ImagensCaixa">
<img src="img/BoxCursos/mec.jpg">
</div>
<div class="Detalhes">
<div class="Conteudo">
<i class="fas fa-cog"></i>
<h3>Mecânica Industrial</h3>
<a href="#">Sobre</a>
</div>
</div>
</div>
<div class="BoxCursos">
<div class="ImagensCaixa">
<img src="img/BoxCursos/nut.jpg">
</div>
<div class="Detalhes">
<div class="Conteudo">
<i class="fas fa-apple-alt"></i>
<h3>Nutrição e Dietética</h3>
<a href="#">Sobre</a>
</div>
</div>
</div>
<div class="BoxCursos">
<div class="ImagensCaixa">
<img src="img/BoxCursos/ser.jpg">
</div>
<div class="Detalhes">
<div class="Conteudo">
<i class="fas fa-gavel"></i>
<h3>Serviços Jurídicos</h3>
<a href="#">Sobre</a>
</div>
</div>
</div>
<div class="BoxCursos">
<div class="ImagensCaixa">
<img src="img/BoxCursos/coz.jpg">
</div>
<div class="Detalhes">
<div class="Conteudo">
<i class="fas fa-carrot"></i>
<h3>Cozinha</h3>
<a href="#">Sobre</a>
</div>
</div>
</div>
</div>
<div>
<h1>Qualquer Coisa</h1>
</div>
<!--BoxDeCursos-->
Friend click on the Edit link at the end of your question and edit by placing your CSS, only with this HTML snippet you can not answer with precision
– hugocsl
Please insert your CSS as well.
– X4vier
Oops, sorry. I just added the CSS
– Ivin