<!--
technique from
http://generatedcontent.org/post/26407228072/split-feature
-->
<main>
<h1>Need glasses?</h1>
<div class="split-image">
<div class="box box-2">
<img src="home-cat.jpg" />
</div>
<div class="slider">
<div class="box box-1">
<img src="home-cat.jpg" />
</div>
</div>
</div>
</main>
$skew: 20deg;
$margin-left: 70px;
$slider-width: 350px;
body {
display: flex;
justify-content: center;
}
main {
min-width: $slider-width*2;
> h1 {
text-align: center;
}
.split-image {
position: relative;
}
.slider:hover {
width: $slider-width*1.65;
}
.box-2:hover + .slider {
width: $slider-width*.3;
}
.slider {
//outline: 1px solid lightgray; //debug
width: $slider-width;
overflow: hidden;
display: inline-block;
transform: skewX( -$skew);
transition: width 250ms;
margin-left: -$margin-left;
border-right: 10px solid rgba(0, 0, 0, .2);
overflow: hidden;
pointer-events: none;
}
.box-1 {
transform: skewX($skew); // reverse skew
margin-left: $margin-left;
pointer-events: auto;
&:hover {
cursor: pointer;
}
&:after {
//content: '';
position: absolute;
background: rgba(200, 0, 0, .1);
width: 200%;
height: 100%;
top: 0;
left: 0;
}
img {
filter: blur(2px);
}
}
.box-2 {
//outline: 1px solid pink;
position: absolute;
top: 0;
left: 0;
&:hover {
cursor: pointer;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.