Image-Swapping-↔-pure-Css.markdown

Image Swapping ↔ pure Css

Drag the black border. Credits:Original idea: solipsistaCP´s pen

A Pen by Kseso on CodePen.

License.

index.html

<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='http://codepen.io/solipsistacp/pen/Gpmaq/'>solipsistaCP</a></p>

style.css

@import url(http://fonts.googleapis.com/css?family=Roboto:300);
html {
  background: #ddd;
  height: 100%;
  width: 100%;
  font-family: roboto;
  font-weight: 300;
}
.alfa {
background-image: url(http://2.bp.blogspot.com/-v3a3glbYRA8/UnqwXdlbwvI/AAAAAAAAHug/gNE9IhI2WSI/s1600/primavera-2.jpg); 
width: 800px;
height: 470px;
border: 20px solid #F0E5AB;
  border-radius: 3px;
box-shadow: 0 0 1px #999, -2px 2px 3px rgba(0,0,0,.2);
padding: 0;
margin: 1rem auto;
position: relative;
overflow: hidden;
}

.bravo {
background-image: url(http://1.bp.blogspot.com/-W4DXI0ORnZg/UnqwWvUkTmI/AAAAAAAAHuY/vEsWcZBOCcI/s1600/oto%C3%B1o.jpg); 
height: 470px;
resize: horizontal; 
position: absolute; 
top: 0; left: 0; 
min-width: 0;
max-width: 800px; 
-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; 
}

.charly{  
resize: horizontal; 
opacity: 0; 
position: relative; 
top: 50%;
left: 0px; 
margin-right: 0px;  
width: 0px; height: 15px; 
max-width: 794px; 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;
}