CSS Reverse Transition And Select Previous Sibling

Bootstrap container has two forms horizontally. Hovering over Form1 will increase the width and decreases the width of form2. but reverse is not happening. Any suggestions please.

Solution 1:

You can do this with flexbox. As Selva has mentioned, CSS can only select the next sibling, not the previous. However, with flexbox this is much easier:

.flexible{display: flex; flex-direction: row;}
#form1:hover{  
    width: 100%;
}
#form2:hover{  
    width: 100%;
}

https://jsfiddle.net/2g4krj0f/

Solution 2:

The solution with pure CSS exists. You need to define css-rule for selector which selects form1 when this form is unhovered while row is hovered: #row:hover > #form1:not(:hover)

#row:hover > #form1:not(:hover){
     width: 25%;
}

http://www.codeply.com/go/0Q2gFDoc4y

look at snippet (for some reason it works in full screen mode):

#row{
  background-color: lightblue;
  border-style: groove;
  }

  #form1{
  background-color: lightgreen;
  width: 50%;
  transition: width 0.75s ease;
  }

  #form1:hover{  
    width: 75%;
  }

  #form1:hover + #form2{
     width: 25%
   }

  #form2{
  background-color: orange;
  width: 50%;
  transition: width 0.75s ease;
  }  

  #form2:hover{
  width: 75%;  
  }

  #row:hover > #form1:not(:hover){
     width: 25%;
     }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div  class="container" >

  <div id="row" class="row" >
    <div id="form1" class="col-xs-6">
    <!-- form1 -->
        <form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-xs-2" for="email">Email:</label>
    <div class="col-xs-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-2" for="pwd">Password:</label>
    <div class="col-xs-10"> 
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-xs-offset-2 col-xs-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-xs-offset-2 col-xs-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
    </div>
    <div id="form2" class="col-xs-6">
    <!-- form 2 -->
        <form class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-xs-2" for="email">Email:</label>
    <div class="col-xs-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-xs-2" for="pwd">Password:</label>
    <div class="col-xs-10"> 
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-xs-offset-2 col-xs-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-xs-offset-2 col-xs-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>
    </div>
</div>

</div>