Make div in flexbox grow on hover - html

Question

I'm trying to implement a view that displays three columns. When the user hovers over one of them it should grow at expense of the others.
I have a few requirements:
I want each column to have a background image and it should not move when the column is resized.
There should be a smooth transition when columns grows/shrinks
It should work in at least Safari, Firefox and Chrome
I would also like to have each column separated by diagonal line if possible. This is what the end result should look like:
I have basic functionality working, but I've run into several problems:
I've not managed to get the background image to be fixed on the parent div
Transitions does not work in Safari
In the real context, which is a website based on Bootstrap, the background image moves by a pixel or two seemingly by random on Safari and Chrome.
I've tried to achieve the diagonal lines using clip-path, but it does not work in Safari and very poorly in Chrome
When changing column from the second to the third the first column is resized a bit
In Chrome the rightmost pixel column flickers while growing/shrinking
Any hints appreciated!
Here's my current code:
.content {
display: flex;
border: 1px solid #f00;
background: #fbb;
padding: 10px;
height: 800px;
color: #fff;
}
.col {
flex-grow: 1;
flex-basis: 0;
transition: flex-grow .3s;
-webkit-transition: flex-grow .3s;
border: 1px solid #0f0;
padding: 10px;
}
.col:hover {
flex-grow: 5;
transition: flex-grow .3s;
-webkit-transition: flex-grow .3s;
}
.col1 {
background: url(https://images.pexels.com/photos/130184/pexels-photo-130184.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-attachment: fixed;
}
.col2 {
background: url(https://images.pexels.com/photos/354939/pexels-photo-354939.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-attachment: fixed;
}
.col3 {
background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-attachment: fixed;
}
<div class="content">
<div class="col col1">
<h1>Foo!</h1>
</div>
<div class="col col2">
<h1>Bar!</h1>
</div>
<div class="col col3">
<h1>Brovinkel!</h1>
</div>
</div>

Answer 1

With transform: skew() one can tilt the items.
As that will create an unfilled upper left and lower right area, widen the left/right will cover that.
Finally we then revert that skew for text/image, where I used a pseudo for the image.
Stack snippet
.content {
display: flex;
height: 400px;
color: #fff;
overflow: hidden;
border: 5px solid #f00;
background: lime;
}
.col {
position: relative;
overflow: hidden;
flex-grow: 1;
flex-basis: 0;
transition: flex-grow .3s;
transform: skew(-20deg, 0);
background: yellow;
}
.col + .col {
border-left: 10px solid #0ff;
}
.col:first-child {
margin-left: -100px;
}
.col:last-child {
margin-right: -100px;
}
.col::before {
content: '';
position: absolute;
height: 100%;
width: calc(100% + 200px);
margin-left: -100px;
display: block;
background-attachment: fixed;
transform: skew(20deg, 0);
}
.col:hover {
flex-grow: 3;
transition: flex-grow .3s;
}
.col1::before {
background: url(https://images.pexels.com/photos/130184/pexels-photo-130184.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
}
.col2::before {
background: url(https://images.pexels.com/photos/354939/pexels-photo-354939.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
}
.col3::before {
background: url(https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
}
.col h1 {
margin: 0;
padding: 10px;
transform: skew(20deg, 0);
}
.col:first-child h1 {
margin-left: 40px;
}
<div class="content">
<div class="col col1">
<h1>Foo!</h1>
</div>
<div class="col col2">
<h1>Bar!</h1>
</div>
<div class="col col3">
<h1>Brovinkel!</h1>
</div>
</div>