How to overlay flex items during a CSS Hover?

Question

How to overlay flex items during a CSS Hover?

Asked 5 years, 9 months ago

Viewed 298 times

5

I have a form you received display: flex, and inside it is 3 inputs: a name, a password and a button, plus a h1 written 'login'.

When I pass the mouse over the elements, the height and the width increase, only that the top element of the element that increases does not get stopped, it goes up.

I was wondering if you have any commands I can use to allow him to overlap the margins and not go up.

Code:

*{color: white}

body{
    background: rgb(1, 1, 24);
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: white;
}

.formulario{
    display: flex;
    background: black;
    border-radius: 200px;
    padding: 50px;
    height: 500px;
    width: 300px;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 0px 0px 1px rgb(29, 172, 0)
}

.login{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
    font-size: 60px;
}

.nome{
    margin-bottom: 30px;
    background: rgb(10, 10, 10);
    border:solid 1px white;
    border-radius: 15px;
}

.nome:hover, .nome:focus{
    border: solid 3px rgb(29, 172, 0);
    padding: 7px 50px;
    transition: ease-in-out 70ms;
}

.nome::placeholder{
    font-family: cursive; 
    text-align: center;
}

.senha{
    margin-bottom: 30px;
    background: rgb(10, 10, 10);
    border:solid 1px white;
    border-radius: 15px;
}

.senha:hover, .senha:focus{
    border: solid 3px  rgb(29, 172, 0);
    padding: 7px 50px;
    transition: ease-in-out 70ms;
}

.senha::placeholder{
    font-family: cursive; 
    text-align: center;
}

.enviar{
    background:rgb(29, 172, 0);
    border-radius: 15px;
    border: solid 1px rgb(29, 172, 0);
    border-radius: 15px;
    color: white;
    padding: 6px 20px;
    border-radius: 200px;
    color: black;
    font-family: cursive;
    font-weight: bold
}

.enviar:hover{
    padding: 20px 36px;
    transition: ease-in-out 70ms;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Formulário estilizado 01</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
    <script src="scripts.js"></script>
</head>
<body>
    <form method="POST" class="formulario">
     <h1 class="login">LOGIN</h1>
     <input type="text" class="nome" placeholder="nome">
     <input type="password" class="senha" placeholder="senha">
     <input type="submit" value="enviar" class="enviar">

    </form>
    
    <script>
    </script>
</body>
</html>

2

Friend only your report doesn’t help you much to answer, just in the kick! Please edit your question and include the CSS and HTML of this form etc

– hugocsl

2019/02/25 at 12:47
obg, amigo. I’ve already edited and put my css code, can you help me?

– lucas F

2019/02/25 at 12:55

2 answers

2

Place each form element inside a flex div with a fixed height. In the example below I put 55px of height. You can also create a class for each div to adjust the spacing between one element and another:

*{
   color: white;
   position: relative;
   }

body{
    background: rgb(1, 1, 24);
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: white;
}

.formulario{
    display: flex;
    background: black;
    border-radius: 200px;
    padding: 50px;
    height: 500px;
    width: 300px;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 0px 0px 1px rgb(29, 172, 0)
}

/* estilos das divs */
.formulario div{
   height: 55px;
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
}


.login{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
    font-size: 60px;
}

.nome{
    margin-bottom: 30px;
    background: rgb(10, 10, 10);
    border:solid 1px white;
    border-radius: 15px;
}

.nome:hover, .nome:focus{
    border: solid 3px rgb(29, 172, 0);
    padding: 7px 50px;
    transition: ease-in-out 70ms;
}

.nome::placeholder{
    font-family: cursive; 
    text-align: center;
}

.senha{
    margin-bottom: 30px;
    background: rgb(10, 10, 10);
    border:solid 1px white;
    border-radius: 15px;
}

.senha:hover, .senha:focus{
    border: solid 3px  rgb(29, 172, 0);
    padding: 7px 50px;
    transition: ease-in-out 70ms;
}

.senha::placeholder{
    font-family: cursive; 
    text-align: center;
}

.enviar{
    background:rgb(29, 172, 0);
    border-radius: 15px;
    border: solid 1px rgb(29, 172, 0);
    border-radius: 15px;
    color: white;
    padding: 6px 20px;
    border-radius: 200px;
    color: black;
    font-family: cursive;
    font-weight: bold
}

.enviar:hover{
    padding: 20px 36px;
    transition: ease-in-out 70ms;
}

<form method="POST" class="formulario">
   <h1 class="login">LOGIN</h1>
   <div>
      <input type="text" class="nome" placeholder="nome">
   </div>
   <div>
      <input type="password" class="senha" placeholder="senha">
   </div>
   <div>
      <input type="submit" value="enviar" class="enviar">
   </div>
</form>

thanks bro, your code was what helped me the most <3

– lucas F

2019/02/25 at 15:10

Browser other questions tagged css css-hover

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

by hugocsl • **65,517** points · Answer 1 · 2019-02-25T13:44:20+00:00

Although the code didn’t look very pretty because I did it in the rush I think it might help you.

The idea here is to involve the input in a label, because of semantics, and tb to be able to use a pseudo element in label, since it is not possible to apply directly to input a pseudo element.

In that pseudo element ::after is that I’m going to apply that effect that you want, in case I used transform:scale() just to speed up, but you can use values in heigth and width on it if you prefer. So you will apply the effect on ::after of label, and not directly on input.

Follow the model. I suggest that one analyzed in the code, because as I said it can be improved, I made this model just to explain to you the concept...

*{color: white}

body{
    background: rgb(1, 1, 24);
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: white;
}

.formulario{
    display: flex;
    background: black;
    border-radius: 200px;
    padding: 50px;
    height: 500px;
    width: 300px;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 0px 0px 1px rgb(29, 172, 0);
    position: relative;
    z-index: 2;
}

.login{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
    font-size: 60px;
}


label:last-child {
    color: black;
    font-family: cursive;
    font-weight: bold;
    position: relative;
    text-align: center;
}
label:last-child::after {
    background:rgb(29, 172, 0);
    border: solid 1px rgb(29, 172, 0);
    padding: 6px 20px;
    border-radius: 25px;
    width: 30px;
    height: 30px;
    content: "";
    position: absolute;
    top: -7px;
    left: 0;
    z-index: -1;
  transform: scale(1) translateX(calc(50% - -3px));
}

label:last-child:hover::after{
  transform: scale(1.2) translateX(calc(50% - 7.5px));
  top: -9px;
  /* left: 0; */
  transition: all ease-in-out 70ms;
}

input {
  all: unset;
  width: 100%;
  height: 100%;
}
label {
  position: relative;
  height: 30px;
  width: 50%;
  margin-bottom: 30px;
  cursor: pointer;
}
label:not(:last-child)::after {
  content: "";
  position: absolute;
  margin-bottom: 30px;
  background: rgb(10, 10, 10);
  border:solid 1px white;
  border-radius: 15px;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
label:hover::after {
  border: solid 3px rgb(29, 172, 0);
  transform: scale(1.6, 1.2);
  top: -3px;
  border-radius: 25px;
  transition: all ease-in-out 70ms;
}

<form method="POST" class="formulario">
  <h1 class="login">LOGIN</h1>
  <label><input type="text" class="nome" placeholder="nome"></label>
  <label><input type="password" class="senha" placeholder="senha"></label>
  <label><input type="submit" value="enviar" class="enviar"></label>
</form>