CSS Наложение, затухание и переход

Question

-> Два перекрывающихся блока -> У каждого из этих div есть текст. -> Одно видно, другого нет. -> При наведении курсора мыши на оба блока сдвиньте влево. -> Видимый исчезает. -> Невидимый исчезает.

Я знаю, как делать все эти эффекты по отдельности, но не могу их комбинировать.

У меня здесь есть код, с которым я возился полдня. Любая помощь будет принята с благодарностью.

https://jsfiddle.net/pjdz0u7q/

.main {
    position: relative;
}

.a,
.b {
    top: 0;
    left: 0;
}

.a {
    transition: .5s;
}

.a:hover {
    transform: translatex(50px);
    animation: fadeOut ease 10s;
}

.b:hover {
    transform: translatex(50px);
    animation: fadeOut ease 10s;
}

<div class="main">
    <div class="a">
        Something
    </div>
    <div class="b">
        Anything
    </div>
</div>

Answer 1

Если я правильно понял вашу задачу - попробуйте это:

.main {
  position: relative;
  display: inline-block;
}

.a,
.b {
  top: 0;
  left: 0;
  transition: .5s;
}

.a {  
  opacity: 1;
}

.b {
  opacity: 0;
  position: absolute;
}

.main:hover .a {
  transform: translatex(50px);
  opacity: 0;
}

.main:hover .b {
  transform: translatex(50px);
  opacity: 1;
}

<div class="main">
  <div class="a">
    Something
  </div>
  <div class="b">
    Anything
  </div>

</div>