CSS Overlay, Fade and Transition

Question

-> Two divs to overlap
-> Each of these divs has some text.
-> One is visible other is not.
-> On mouse over both the divs slide left.
-> The visible one fades out.
-> The invisible one fades in.

I know how to do all these effects individually, but unable to combine them.

I have some code here that I have faffed around with for half a day. Any help will be appreciated.

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

If I understood you task correctly - try this:

.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>