How do I set reduced width to a div - html

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

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

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.
Wrap your divs in a container.
Apply display: flex for the container.
Apply flex: 1 1 to the children. This is important.. do not give any flex-basis.. let it default.
Give a width: 100%; to children, they will automatically grow/shrink to available space.
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

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;
}