Как сделать плавную заливку фона слева направо вместе с input и submit при наводе

Question

Как реализовать вот такое? Нужно при наводе чтобы плавно появлялось и пропадало. Я пробовал, но получается совсем не так:(

.feedback {
  display:flex;
  padding: 40px;
  background: linear-gradient(to right, #000 50%, #FA5C45 50%);
  background-size: 200% 100%;
  background-position: 100%;
  transition:all 2s ease;

}

.title__block {
  width: 50%;
}

form {
  display: flex;
   flex-direction: column;
}

.input {
  margin-bottom: 20px;
}

.feedback:hover {
    background-position: 0 100%;
}

h3 {
  color: #fff;
}

<div class="feedback">
  <div class="title__block"> 
    <h3> Оставьте заявку</h3>
  </div>
  <div class="form__block">
    <form>
      <input type="name" class="input">
      <input type="phone" class="input">
      <input type="submit" class="submit">


    </form>
  </div>

</div>

Answer 1

Добавляю дочерний элемент, анимирую при наведении и его тоже. Это ещё далеко от идеала, но вам есть над чем подумать.

.feedback {
  display:flex;
  padding: 40px;
  background: linear-gradient(to right, #000 50%, #FA5C45 50%);
  background-size: 200% 100%;
  background-position: 100%;
  transition:all 2s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.title__block, .form__block{
  z-index: 10;
}

.title__block {
  width: 50%;
}

form {
  display: flex;
  flex-direction: column;
}

.input {
  margin-bottom: 20px;
}

.feedback:hover {
    background-position: 0 100%;
}

.cover {
  position: absolute;
  top: -30px;
  bottom: -30px;
  left: -200px;
  width: 200px;
  margin: 0;
  background-color: #000;
  border-radius: 0 50% 50% 0;
  transition:all 2s ease;
  z-index: 2;
}

.feedback:hover .cover {
    left: 100%;
}

h3 {
  color: #fff;
}

<div class="feedback">
  <div class="cover"></div>
  <div class="title__block"> 
    <h3> Оставьте заявку</h3>
  </div>
  <div class="form__block">
    <form>
      <input type="name" class="input">
      <input type="phone" class="input">
      <input type="submit" class="submit">


    </form>
  </div>

</div>

Answer 2

Доработать нужно будет

   .feedback {
    display: flex;
    justify-content: space-evenly;
    padding: 40px 0;
    background-color:  #FA5C45;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.title__block {
    color: white;
    align-self: center;
    z-index: 2;
}

.form-wrapper {
    display: flex;
    flex-direction: column;
    width: 400px;
    z-index: 3;
}
.input {
    outline: none;
    border: none;
    background-color: transparent;
    border-bottom: 1px solid rgb(116, 116, 116);
    margin-bottom: 20px;
    padding: 10px;
    z-index: 3;
}
.input::placeholder {
    font-size: 24px;
    z-index: 3;
}
.bg-black {
    position: absolute;
    width: 130%;
    height: 100%;
    margin: 0;
    top: 0;
    right: 100%;
    background-color: #000;
    border-radius: 0 140px 140px 0;
    transition: all 2s ease;
    z-index: 2;
}
.submit {
    align-self: flex-end;
    width: 200px;
    border: none;
    outline: none;
    background-color: transparent;
    color: white;
    width: max-content;
    padding-bottom: 10px;
    border-bottom: 1px dotted grey;
    z-index: 3;
}

.feedback:hover .bg-black {
    right: -95px;
}

.feedback:hover .input {
    border-bottom: 1px solid rgb(255, 255, 255);
}

.feedback:hover .submit{
    border-bottom: 1px dotted rgb(255, 255, 255);
}

.feedback:hover .input::placeholder {
    color: white;
}

<div class="feedback">
    <div class="bg-black"></div>
    <h1 class="title__block">Оставьте заявку</h1>
    <div class="form__block">
        <form action="#">
            <div class="form-wrapper">
                <input type="name" class="input" placeholder="Имя" />
                <input type="phone" class="input" placeholder="Телефон" />
                <button type="submit" class="submit">Отправить заявку</button>
            </div>
        </form>
    </div>
</div>

БЛОГ НА HUSL

Как сделать плавную заливку фона слева направо вместе с input и submit при наводе

Ответы (2 шт):