CSS oblique div several degrees with background image

Question

I created 3 divs with each 33% width, which I want to tilt a few degrees. The first and last div should not be oblique, so it will only work for internal content. This is also because I want to add 4 divs (25% of the width) in the near future.

I also want to make the div with the background wider, on hover. So the other divs will be 30%, and the one on hover will be 40%.

Note. I do not want to rotate the image myself, just a div. The image should be positioned without rotation.

I can not do this with CSS.

My current code is:

<div class="divisions">

<div class="col-sm-4 division hosting">
<div class="inner">

</div>
</div>

<div class="col-sm-4 division shop">
<div class="inner">

</div>
</div>

<div class="col-sm-4 division solutions">
<div class="inner">

</div>
</div>

</div>

JSFiddle: https://jsfiddle.net/1cwxLw7h/2/

What I want:

Answer 1

body {margin: 0px;}

.divisions .col-xs-4 {
  padding: 0;
}
.divisions .division {
  transition: width 0.25s linear;
}
.divisions:hover .division {
  width: 31%;
}
.divisions:hover .division:hover {
  width: 38%;
}
.divisions .solutions .inner {
  height: 100%;
  min-height: 750px;
  background: url(http://67.media.tumblr.com/f3ed524eaf11c7095fc583390eb346be/tumblr_oaj4d1Uh0n1teue7jo1_1280.jpg) center center no-repeat;
  background-size: cover;
}
.divisions .shop .inner {
  height: 100%;
  min-height: 750px;
  background: url(http://65.media.tumblr.com/8b638bda48df96a5350d7dd3796e459c/tumblr_oaj43tSwts1teue7jo1_1280.jpg) center center no-repeat;
  background-size: cover;
}
.divisions .hosting .inner-holder {
  transform: skewX(-4deg);
  position: relative;
  overflow: hidden;
  margin: 0 -30px;
  z-index: 5;
}
.divisions .hosting .inner {
  height: 100%;
  min-height: 750px;
  background: url(http://67.media.tumblr.com/43a177556b301a8dc5cb45145050853b/tumblr_oaj40xITvh1teue7jo1_1280.jpg) center center no-repeat;
  background-size: cover;
  transform: skewX(4deg);
  margin: 0 -30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="divisions">

  <div class="col-xs-4 division solutions">
    <div class="inner">

    </div>
  </div>

  <div class="col-xs-4 division hosting">
    <div class="inner-holder">
      <div class="inner">

      </div>
    </div>
  </div>

  <div class="col-xs-4 division shop">
    <div class="inner">

    </div>
  </div>

</div>

Hide result

Answer 2

, div size .

body {margin: 0px;}

.col-sm-4 {float: left; width: 33.33333333333333%; display: inline-block}
.divisions .solutions .inner {height: 100%; min-height: 750px; background: url(http://67.media.tumblr.com/f3ed524eaf11c7095fc583390eb346be/tumblr_oaj4d1Uh0n1teue7jo1_1280.jpg) center center no-repeat; background-size: cover}

.divisions .shop .inner {height: 100%; min-height: 750px; background: url(http://65.media.tumblr.com/8b638bda48df96a5350d7dd3796e459c/tumblr_oaj43tSwts1teue7jo1_1280.jpg) center center no-repeat; background-size: cover}

.divisions .hosting .inner {height: 100%; min-height: 750px; background: url(http://67.media.tumblr.com/43a177556b301a8dc5cb45145050853b/tumblr_oaj40xITvh1teue7jo1_1280.jpg) center center no-repeat; background-size: cover}
.divisions{
  width:100%;
  height:auto;
  overflow:hidden;
}
.divisions .solutions{
  transform:skew(-3deg);
  float:left;
  margin-left:-18px;
  transition:width 1s ease;
}
.divisions .solutions:hover{
  width:40%;
}
.divisions .hosting{
  transform:skew(-3deg);
  float:left;
  position:absolute;
  z-index:2;
  width:45%;
 transition:width 1s ease;
 }
.divisions .hosting:hover{
  width:50%;
}
.divisions .shop{
  transform:skew(-3deg);
  float:right;
  margin-right:-18px;
  transition:width 1s ease;
}
.divisions .shop:hover{
  width:45%;
}

<div class="divisions">

<div class="col-sm-4 division solutions">
<div class="inner">

</div>
</div>

<div class="col-sm-4 division hosting">
<div class="inner">

</div>
</div>

<div class="col-sm-4 division shop">
<div class="inner">

</div>
</div>

</div>

Hide result