How do I set reduced width to a div

Question

I have 4 divs floating left next to each other with a set hover width transition, three divs are the same width but the fourth is smaller. When you hover up on the div it gets bigger and I need the rest to reduce the width automaticaly to the set reduced-width value.

Here is the code

.container1 {
 position: relative;
 height: 600px;
 width: 29%;
 top: 0px;
 left: 0%;
 float: left;
 z-index: 99;
 opacity: 1;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 border-right: #000 4px solid;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
 }

.container1:hover {
 width: 40%;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
 }

.container1 .reduced-width {
 width: 20%;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out; }
#image1 {
background: url("../img/bg1.jpg");
}

.container2 {
position: relative;
height: 600px;
width: 29%;
top: 0px;
left: 0%;
float: left;
z-index: 99;
opacity: 1;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-right: #000 4px solid;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
 }

 .container2:hover {
  width: 40%;
  transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
  }
.container2 .reduced-width {
width: 20%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out; }
#image2 {
background: url("../img/bg2.jpg");
}

 .container3 {
 position: relative;
 height: 600px;
 width: 29%;
 top: 0px;
 left: 0%;
 float: left;
 z-index: 99;
 border-right: #000 4px solid;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
 }

.container3:hover {
width: 40%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
.container3 .reduced-width {
width: 20%;
transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}
#image3 {
background: url("../img/bg3.jpg");
}
.container4 {
 position: relative;
 height: 600px;
 width: 13%;
 top: 0px;
 left:0%;
 z-index: 999;
 float: right;
 opacity: 1;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 border-right: #000 4px solid;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out; 
 }

.container4:hover  {
 width: 30%;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
 }
 #image4 {
 background: url("../img/3.jpg");
 }

And the HTML

   <div class="container1 animated bounceInLeft reduced-width" id="image1">         
   </div>
   <div class="container2 animated bounceInDown reduced-width" id="image2">
   </div>
   <div class="container3 animated bounceInDown reduced-width" id="image3">
   </div>
   <div class="container4 animated bounceInRight reduced-width" id="image4">
   </div>

Answer 1

EDIT: now the 4th column has a smaller width

Here is an example how you could fix it: http://jsfiddle.net/intergalactic_overlords/0hLmrme4/

Html needs a wrapper. When hovering the wrapper, children (the containers) width is set to 20%. When hovering a specific container, its width is set to 40%.

<div class="container-wrap">
   <div class="container container1 animated bounceInLeft reduced-width" id="image1">         
   </div>
   <div class="container container2 animated bounceInDown reduced-width" id="image2">
   </div>
   <div class="container container3 animated bounceInDown reduced-width" id="image3">
   </div>
   <div class="container container4 animated bounceInRight reduced-width" id="image4">
   </div>
</div>

CSS:

.container {
   background:snow;
   box-sizing:border-box;
   position: relative;
   height: 600px;
   width: 23%;
   float: left;
   z-index: 99;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   border-right: #000 4px solid;
   transition: all 300ms ease-in-out;
   -o-transition: all 300ms ease-in-out;
   -moz-transition: all 300ms ease-in-out;
   -webkit-transition: all 300ms ease-in-out;
}
.container-4 {
   width: 21%;
}

.container-wrap:hover > div {
    width: 21%;
}
.container-wrap:hover > .container4 {
    width: 16%;
}
.container-wrap > .container:hover {
    background: yellow;
    width: 42%;
    transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
 }
.container-wrap > .container4:hover {
    background: yellow;
    width: 37%;
    transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
 }

Answer 2

You don't need to do all that stuff for doing what you want. You can do it without any Javascript or jQuery using just CSS3.

1. Wrap your divs in a container.
2. Apply display: flex for the container.
3. Apply flex: 1 1 to the children. This is important.. do not give any flex-basis.. let it default.
4. Give a width: 100%; to children, they will automatically grow/shrink to available space.
5. Apply flex: 1 1 <your-width> for :hover on children. That's it.

Demo Fiddle: http://jsfiddle.net/abhitalks/xghqmq6u/

See this snippet:

.wrap {
    width: 100%;
    display: flex;
    flex-direction: columns;
}

.floaters {
    flex: 1 1 0%;
    height: 120px; width: 100%;
    transition: all 500ms;
}

.floaters:hover { flex: 1 1 50%;  }

.container1 { background-color: #f00;}
.container2 { background-color: #0f0;}
.container3 { background-color: #00f;}
.container4 { background-color: #ccc;}

<div class="wrap">
    <div class="container1 floaters" id="image1"></div>
    <div class="container2 floaters" id="image2"></div>
    <div class="container3 floaters" id="image3"></div>
    <div class="container4 floaters" id="image4"></div>
</div>

Answer 3

This is how you can fix it.

HTML (you don't need a wrapper)

<div class="container1 animated bounceInLeft" id="image1"></div>
<div class="container2 animated bounceInDown" id="image2"></div>
<div class="container3 animated bounceInDown" id="image3"></div>
<div class="container4 animated bounceInRight" id="image4"></div> 

CSS

    .container {
 position: relative;
 height: 600px;
 width: 24%;
 top: 0px;
 left: 0%;
 float: left;
 z-index: 99;
 opacity: 1;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 border-right: #000 4px solid;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
  background-color:red;
 }

.container:hover {
 width: 35%;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
 }

.container.reduced-width {
 width: 20%;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out; }
#image1 {
background: red;
}

#image2 {
background: yellow;
}

#image3 {
background: green;
}

 #image4 {
 background: blue  ;
 }

And of course you need Javascript (Jquery here)

   $('.animated').mouseenter(function(){
  console.log('here');
  $(this).removeClass('reduced-width').siblings('.animated').addClass('reduced-width');
}).mouseout(function(){
  $('.animated').removeClass('reduced-width');
});

Answer 4

• when you are targeting 2 classes you should do it without spaces( like you did .container1 .reduced-width it should be .container1.reduced-width)

• set width in such a way that your design won't break.. like your width of all containers should be 24%(as you have 4px border too) so that total will be equal or less than 100%.

• You should write least css and target more elements. like you are targeting a particular div everytime which is not advisible.. you could use reduced with class only once and it would have set the size everytime.

• this could be your reduced/optimized code:

HTML:

<div class="container animated bounceInLeft" id="image1"></div>
<div class="container animated bounceInDown" id="image2"></div>
<div class="container animated bounceInDown" id="image3"></div>
<div class="container animated bounceInRight" id="image4"></div>

CSS:

.container {
 position: relative;
 height: 600px;
 width: 24%;
 top: 0px;
 left: 0%;
 float: left;
 z-index: 99;
 opacity: 1;
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 border-right: #000 4px solid;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
  background-color:red;
 }

.container:hover {
 width: 40%;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out;
 }

.container.reduced-width {
 width: 20%;
 transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -webkit-transition: all 300ms ease-in-out; }
#image1 {
background: red;
}

#image2 {
background: yellow;
}

#image3 {
background: green;
}

 #image4 {
 background: blue  ;
 }

Here is CodePen Link