Henk Z Henk Z - 4 months ago 52
HTML Question

CSS oblique div few deg with background image

I created 3 div's with each 33% width, that I want to oblique a few degrees.
The first and last div should not get a oblique, so that it will only work for the inner content. This also because I want to add 4 divs (25% width) in the near future.

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

Note: I do not want to rotate the image itself, only the div. The image should be place without rotation.

I can not get it done with CSS.

My current code:

<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:

enter image description here

Answer

As you can't select previous sibling with css, you will need jQuery to achieve hover effect on columns.

$(function() {
    $('.division').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $('.division').removeClass('hover');
    });
});
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>

Comments