I have a div that when hovering the mouse and this makes the hover, is being cut precisely by the div of the main box of the message and so far I could not adjust. Could anyone help?
.bull_dog {
position: absolute;
top: 45%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.baloon_subscriber {
position: relative;
display: inline-block;
width: 400px;
height: 230px;
top: 95%;
left: 35%;
margin-right: -50%;
transform: translate(-50%, -50%);
border-radius: 0%;
z-index:1000;
}
.baloon_subscriber:hover::after {
visibility: visible;
opacity:0;
-webkit-animation: fadeIn 1s ease-in-out;
-moz-animation: fadeIn 1s ease-in-out;
-o-animation: fadeIn 1s ease-in-out;
animation: fadeIn 1s ease-in-out;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
.baloon_subscriber img {
width: 100%
}
.baloon_subscriber::after {
position: absolute;
display: block;
background: url(images/baloon_subscriber.png) no-repeat;
content: '';
top: -277.5px;
left: 30px;
width: 150%;
height: 240%;
visibility: hidden;
}
#subscribebox {
position: fixed; /* posição fixa ao elemento pai, neste caso o BODY */
/* Posiciona no meio, tanto em relação a esquerda como ao topo */
left: 50%;
top:7%;
width:auto; /* Largura da DIV */
height:auto; /* Altura da DIV */
/* A margem a esquerda deve ser menos a metade da largura */
/* A margem ao topo deve ser menos a metade da altura */
/* Fazendo isso, centralizará a DIV */
margin-left: -360px;
background:#fafafa;
-webkit-box-shadow: 3px 1px 3px rgba(0, 0, 0, 0.07);
box-shadow: 4px 16px 32px 4px rgba(201, 0, 0, 0.8);
/*box-shadow: 0 0 5px rgba(0,0,0,1) inset 0 0 5px rgba(0,0,0,1), 0 0 0 2px #990000;*/
z-index: 9999; /* Faz com que fique sobre todos os elementos da página */
}
.subscribebox {
display:none;
}
#subscribebox p {
color: white;
font-size: 15px;
text-align: center;
font-weight: 700;
}
.borda {
position: relative;
padding: 1em;
font: 100%/1.6 Baskerville, Palatino, serif;
overflow: hidden;
border-radius: 0px;
box-shadow: 0 0 0 3px #990000;
box-shadow: 0 0 5px rgba(0,0,0,1) inset 0 0 5px rgba(0,0,0,1), 0 0 0 2px #990000;
}
@keyframes animated
{
from
{
left: -50%; /* metade do width */
}
to
{
left: 0%;
}
}
.borda::after{
content: '';
display: inline-block;
width: 200%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 20px solid transparent;
border-image: fill 20 repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #660000 0, #660000 3em, transparent 0, transparent 4em);
animation: animated 10s linear infinite;
z-index: -1;
}
.borda_background {
background: #fff;
border-radius: 0px;
padding: 25px;
}
!-- EMAIL SUBSCRIBER BOX POPUP -->
<div id="subscribebox" class="subscribebox">
<!-- Borda fixa -->
<div class="borda">
<!-- Borda animada -->
<div class="borda_background">
<!-- Icones Sociais -->
<div class="follow-subscribe-social">
<ul>
<li><a target="_blank" href="https://www.facebook.com/tauritecnologia" title="Facebook" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a target="_blank" href="https://twitter.com/tauritecnologia" title="Twitter" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a target="_blank" href="" title="Linkedin" ><i class="fa fa-linkedin"></i></a></li>
<li><a target="_blank" href="https://plus.google.com/b/102329465140426413454/102329465140426413454/reviews?hl=pt-BR" title="Google Plus" target="_blank"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
<article class="back_newspaper">
<div class="none">
<div class="normal">
<font face="Yesteryear" size="180px" color="#e74c3c"><center>Assine agora a nossa newsletter:</center></font>
</div>
<br>
<div class="texto">
<font face="futura_ltbook" size="4px"><center>Cadastre-se já e receba em seu e-mail todas as nossas novidades, atualizações, <br>casos de estudo e dicas de tecnologia!</center></font>
</div>
<br>
</div>
<div class="none">
<div class="none">
<a href="#" class="baloon_subscriber" ></a>
</div>
<div class="bull_dog">
<br><br>
<center><img src="images/dog_paper.png" style="width:200px; height:190px;" class="" /></center>
<br><br>
</div>
</div>
</article>
<div class="normal">
<form class="subscribe" action=''>
<!--<form class="subscribe" action='https://feedburner.google.com/fb/a/mailverify?uri=Msdesign92' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=Msdesign92, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>-->
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Digite aqui o seu E-Mail:'/><br>
<!-- BOTAO INSCREVER-SE AGORA -->
<input class="subscribe-button" type="submit" value="INSCREVER-SE AGORA" onclick="return validar()"/>
<br>
</form>
<!-- BOTAO NAO -->
<form class="subscribe" action="">
<input class="subscribe-button-exit" type="submit" value="NÃO" onclick="document.getElementById('subscribebox').style.display = 'none';"/>
</form>
<br><br>
<p align="center"><span class="footer_credit"><font face="Yesteryear" size="5px">Ao inscrever-se, você aceita nossos Termos e Privacidade de Uso.<br>Respeitamos suas informações e segurança de dados aqui confiados.</font></span></p>
</div>
</div><!-- fim da div borda animada -->
</div>
<!-- Icone do Cadeado -->
<div class="direita_inferior"></div>
<!-- Icone do Jornal -->
<div class="esquerdo_superior"></div>
<!-- Botao Fechar -->
<!--<a class="subscribebox-remove" href="#"><i class="fa fa-times"></i></a>-->
<div id="fechar" align=right><a href="javascript:fechar();" title="Fechar">
<div class="botao-x_subscribebox"><img src="images/close_red.png" style="width:32px; height:32px;"/></div></a>
</div>
</div><!-- fim da div borda fixa -->
<!-- EMAIL SUBSCRIBER BOX POPUP ENDS HERE -->