<h1>Drag the black border ↔ pure Css</h1>
<div class='alfa' title='Primavera'>
<div class='bravo' title='Otoño'>
<textarea readonly cols='0' rows='0' class='charly'></textarea>
</div>
</div>
<p>Credits:Original idea: <a href='https://codepen.io/solipsistacp/pen/Gpmaq/'>solipsistaCP</a></p>
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
html {
  background: #ddd;
  height: 100%;
  width: 100%;
  font-family: roboto;
  font-weight: 300;
}
.alfa {
background-image: url(https://picsum.photos/800/600); 
width: 600px;
height: 450px;
border: 20px solid #F0E5AB;
padding: 0;
margin: 1rem auto;
position: relative;
overflow: hidden;
}

.bravo {
background-image: url(https://picsum.photos/800/510); 
height: 450px;
resize: horizontal; 
position: absolute; 
top: 0; left: 0; 
min-width: 0;
max-width: 600px; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}
.bravo:before {
content: '↔';
background: rgba(0,0,0,.7);
font-size: 18px; 
color: white; 
top: 0; right: 0px;
hight: 100%;
line-height: 486px;  
position: absolute; 
cursor: move;
}

.charly{  
resize: horizontal; 
opacity: 0; 
position: relative; 
top: 50%;
left: 0px; 
margin-right: 0px;  
width: 0px; height: 15px; 
max-width: 594px; min-width: 15px; 
outline: 0 solid transparent; 
cursor: move;
cursor: all-scroll;
transform: scaley(35);
transform-origin: center center;
animation: delta 5s 1 normal ease-in-out 1s;
}
@keyframes delta {
30% {width: 500px}
60% {width: 150px}
80% {width: 250px}
}
h1 {
  text-align: center;
  color: #2FB4E1;
  font-size: 2rem;
  line-height: 2rem;
  margin: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.