2 div boxes side by side with 50% width and 100% height, expanding to 100% fill up the whole width on hover on each box

Question

I am trying to have 2 div boxes with 50% width each and 100% height.. and within that div box, it is like an anchor link where we hover the mouse over the 1st box (Box A), Box A will transition from its 50% width to full 100% width from left to right. And if we were to hover the mouse over on Box B, it would also transition from right to left and fill up the width 100%.

Maybe a picture can explain better.. This is the initial state:

Then when the mouse hovers over Box A on the left:

Then when the mouse hovers over Box B on the right:

I am unsure how to do this with CSS or with javascript/jquery or with both? I would appreciate if anyone could help me with this.

Thanks :)

Answer 1

Here is a method using flexbox.

To allow the hover effect to work on the previous sibling I've reversed the order in the HTML. There may be a simpler way to do this but I couldn't crack it..

.container {
  display: flex;
  height: 200px;
  border: 2px solid grey;
  overflow: hidden;
  box-sizing: border-box;
}

.block {
  background: pink;
  flex: 1;
  margin: 10px;
  /* below is styling for demo */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.b {
  order: 2;
}

.block:hover {
  min-width: calc(100% - 20px);
}

.block:first-of-type:hover+.block {
  display: none;
}

<div class="container">
  <div class="block b">B</div>
  <div class="block a">A</div>
</div>