Achieve irregular rectangular shape image masking in html css - html

Question

Is it possible to achieve such an effect in HTML5 and CSS3 , Please find the attached image
Here I have two divs with overflow:hidden, inside each is an image. And when I hover each image, the image zoom in or moves up or down inside this same div container. So basically the div works like a mask for the big image.
What I fail to achieve here is the shape of the div to mask the image. Is there a way to achieve that and can work in the latest versions of almost all browsers?
Thanks for you help !

Answer 1

For something like that, I would suggest two different possibilities:
Using CSS transformations (in particular skewY); or
Using SVG (with just some polygons)
Each of them has some good/bad things and will work in all the modern browsers and in mobile, as you can see in the caniuse.com website for transform and SVG.
Using CSS 2D Transformations
You would have a container div that would be skewed vertically, and then inside of it other divs with the skew (over)corrected. Then hiding the overflow so the excess of the contained divs is not shown.
You can see a demo here (or on this JSFiddle):
#skewed {
position:relative;
margin-top:20px;
width: 500px;
height: 300px;
transform: skewY(-2deg);
-webkit-transform: skewY(-2deg);
-moz-transform: skewY(-2deg);
-o-transform: skewY(-2deg);
overflow:hidden;
background:black;
-webkit-backface-visibility: hidden;
}
#skewed div {
position:absolute;
height:200px;
width:500px;
transform: skewY(4deg);
-webkit-transform: skewY(4deg);
-moz-transform: skewY(4deg);
-o-transform: skewY(4deg);
overflow:hidden;
opacity:0.4;
transition:all 0.5s;
z-index:1;
background-size:100% 100%;
-webkit-backface-visibility: hidden;
}
#skewed div:hover {
opacity:1;
z-index:2;
background-size:110% 110%;
}
#top {
top:-50px;
left:0;
background:url(http://lorempixel.com/1000/400/animals) no-repeat center center;
}
#bottom {
top:150px;
left:0;
background:url(http://lorempixel.com/1000/400/people) no-repeat center center;
}
<div id="skewed">
<div id="top"></div>
<div id="bottom"></div>
</div>
About this solution:
Supported by all major browsers (except Opera Mini), although you'll need to use prefixes.
Easy to implement and extend with further content (text, links, etc.)
In Chrome, the edges look too sharp. Although this can be fixed using -webkit-backface-visibility: hidden as suggested by Neven in this answer.
Using SVG
Use polygons to define the basic shapes that you want to create.
I am not a SVG-expert, so I can't do anything fancy, but this is to get a general idea. Here is a simple demo (you can also see it on this JSFiddle):
polygon {
opacity:0.4;
transition:all 0.5s;
}
polygon:hover {
opacity:1;
}
<svg width="500" height="300" viewBox="0 0 500 300">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="300">
<image xlink:href="http://lorempixel.com/600/300/animals" x="0" y="0" width="600" height="300" />
</pattern>
<pattern id="img2" patternUnits="userSpaceOnUse" width="600" height="300">
<image xlink:href="http://lorempixel.com/600/300/people" x="0" y="0" width="600" height="300" />
</pattern>
</defs>
<polygon id="top" points="0,20 500,0 500,170 0,130" fill="url(#img1)" />
<polygon id="bottom" points="0,130 500,170 500,280 0,300" fill="url(#img2)" />
</svg>
About this solution:
Supported by all the major browsers (no need for prefixes or anything)
Highly customizable: I used polygons, but you could use paths and curves to give a more personal solution.
SVG is not as easy as the other solution (Ok, something as simple as this is easy, but something more complex will require some learning).