Image hover about div not working

1

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(&apos;https://feedburner.google.com/fb/a/mailverify?uri=Msdesign92, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' 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 -->
  

    
asked by anonymous 21.06.2018 / 20:43

0 answers