How do I stop the image from disturbing the input?

Question

How do I stop the image from disturbing the input?

Asked 5 years, 6 months ago

Viewed 59 times

0

The transparent part of the image is in front of the input, I know it’s a simple problem, but I couldn’t solve it.

The image I’m using is this:

<style>


.firstBlur {
  margin:20px 20px 0;
  padding:20px;
  position:relative;
}
/* coloque blur em todos os elementos menos no elemento com a class .modal */
.firstBlur.modalBlur > *:not(.modal) {
  -webkit-filter: blur(8px);
  filter: blur(8px);
}
/* remove a cor escurecida do fundo, se quiser que fique escurecido ajuste a opacidade para 0.5*/
.modal-backdrop.show {
  opacity: 0;
}


.log{
  margin-top: -400px;
}
body {font-family: Arial, Helvetica, sans-serif;
}


/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */


/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;

}


/* Imagem do logotipo, caso queira alterar a posição dela ou aplicar efeitos, etc... */

.logo {
  height: 500px;
  width: 500px;
  margin: 24px 0 12px 0;
  margin-left: -14px;
  margin-top: 130px;
  position: relative;


}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.container {
  padding: 16px;
  color: black;
}

span.psw {
  float: right;
  padding-top: 16px;

}

/* The Modal (background) */


.container-blur{
  filter: blur(8px);
  -webkit-filter: blur(8px);
}
/* The Close Button (x) */


/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s

}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;

  }
  .cancelbtn {
     width: 100%;
  }



</style>

<!DOCTYPE html>
<html lang="en">

<head>
        <Meta charset="UTF-8">
    <Meta name="description" content="Site educaciona para deficientes auditivos">
    <Meta name="keywords" content="deficientes, deficientes auditivos, educação, surdos, educação para surdos, educação para deficientes, site educacional, projeto aval, aval, auxilio para surdos, ajuda com surdos, escola surdos, escola deficientes, surdos e mudos">
    <Meta name="author" content="Vitor Hugo Minhaco Junior e João Vitor Galhardo">
  <Meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="JANE1estilo.css">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    
 <!-- Não remover esse style -->

<style>
.firstBlur {
  margin:20px 20px 0;
  padding:20px;
  position:relative;
}
/* coloque blur em todos os elementos menos no elemento com a class .modal */
.firstBlur.modalBlur > *:not(.modal) {
  -webkit-filter: blur(8px);
  filter: blur(8px);
}
/* remove a cor escurecida do fundo, se quiser que fique escurecido ajuste a opacidade para 0.5*/
.modal-backdrop.show {
  opacity: 0;
}
</style>
</head>

<body>

    <div class="firstBlur">
        <h2>What is Lorem Ipsum?</h2>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard
        </p>

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
            Abrir modal
        </button>

        <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
            aria-hidden="true" data-backdrop="true" data-keyboard="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Faça o login!</h5>
                        
                        </button>
                         </div>
                    
                    <div class="modal-body">


                    <!-- Início do formulário -->

                        <form class="log">
    <div class="imgcontainer">
     
      <div class="logo">
      <img src="logotipo.png" alt="Avatar" class="logo">
    </div>
    </div>


    <div class="container">
      <label for="uname"><b>Nome</b></label>
      <input type="text" placeholder="Digite seu nome" name="uname" required>

      <label for="psw"><b>Senha</b></label>
      <input type="password" placeholder="Digite sua senha" name="psw" required>
        
      <button type="submit" class="shadow-pop-tr"style="background-color:#008080">Entrar</button>
      <label>
        <input type="checkbox" checked="checked" name="remember"> Lembrar de mim
      </label>
    </div>

    <div class="container" style="background-color:#008080; height: 60px;">
     
      <span class="psw" style="margin-top: -13px">Esqueceu a<a href="#"> senha?</a></span>
    </div>
  </form>

   <!-- Fim do formulário -->


                    </div>
                    
              


    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

     <!-- Animação para tornar o fundo embaçado -->

    <script>
        (function () {
            //Show Modal
            $('#exampleModalLong').on('show.bs.modal', function (e) {
                $('.firstBlur').addClass('modalBlur');
            })
            //Remove modal
            $('#exampleModalLong').on('hide.bs.modal', function (e) {
                $('.firstBlur').removeClass('modalBlur');
            })
        })();
    </script>
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">  
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"> 
  </script>
</script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js">
    </script>
    
</body>

</html>

1 answer

Browser other questions tagged javascript html css image input

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2019-05-06T05:39:11+00:00

Insert the style into your CSS:

.imgcontainer + div{
   position: relative;
   z-index: 1;
}

This will make the first div after .imgcontainer stay on top of .imgcontainer. The sign + means adjacent element, that is, the next element in the DOM.

Or you can just change the class .container by inserting the two properties:

.container{
   position: relative;
   z-index: 1;
}

Behold:

(function () {
            //Show Modal
            $('#exampleModalLong').on('show.bs.modal', function (e) {
                $('.firstBlur').addClass('modalBlur');
            })
            //Remove modal
            $('#exampleModalLong').on('hide.bs.modal', function (e) {
                $('.firstBlur').removeClass('modalBlur');
            })
        })();

.firstBlur {
  margin:20px 20px 0;
  padding:20px;
  position:relative;
}
/* coloque blur em todos os elementos menos no elemento com a class .modal */
.firstBlur.modalBlur > *:not(.modal) {
  -webkit-filter: blur(8px);
  filter: blur(8px);
}
/* remove a cor escurecida do fundo, se quiser que fique escurecido ajuste a opacidade para 0.5*/
.modal-backdrop.show {
  opacity: 0;
}


.log{
  margin-top: -400px;
}
body {font-family: Arial, Helvetica, sans-serif;
}


/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */


/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;

}


/* Imagem do logotipo, caso queira alterar a posição dela ou aplicar efeitos, etc... */

.logo {
  height: 500px;
  width: 500px;
  margin: 24px 0 12px 0;
  margin-left: -14px;
  margin-top: 130px;
  position: relative;


}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.container {
  padding: 16px;
  color: black;
}

.imgcontainer + div{
   position: relative;
   z-index: 1;
}

span.psw {
  float: right;
  padding-top: 16px;

}

/* The Modal (background) */


.container-blur{
  filter: blur(8px);
  -webkit-filter: blur(8px);
}
/* The Close Button (x) */


/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s

}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;

  }
  .cancelbtn {
     width: 100%;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="firstBlur">
        <h2>What is Lorem Ipsum?</h2>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard
        </p>

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
            Abrir modal
        </button>

        <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
            aria-hidden="true" data-backdrop="true" data-keyboard="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Faça o login!</h5>
                        
                        </button>
                         </div>
                    
                    <div class="modal-body">


                    <!-- Início do formulário -->

                        <form class="log">
    <div class="imgcontainer">
     
      <div class="logo">
         <img src="https://i.stack.imgur.com/ZlRi9.png" alt="Avatar" class="logo">
      </div>
    </div>


    <div class="container">
      <label for="uname"><b>Nome</b></label>
      <input type="text" placeholder="Digite seu nome" name="uname" required>

      <label for="psw"><b>Senha</b></label>
      <input type="password" placeholder="Digite sua senha" name="psw" required>
        
      <button type="submit" class="shadow-pop-tr"style="background-color:#008080">Entrar</button>
      <label>
        <input type="checkbox" checked="checked" name="remember"> Lembrar de mim
      </label>
    </div>

    <div class="container" style="background-color:#008080; height: 60px;">
     
      <span class="psw" style="margin-top: -13px">Esqueceu a<a href="#"> senha?</a></span>
    </div>
  </form>

   <!-- Fim do formulário -->


                    </div>