Image Manipulation Slider with CSS Filters

image-manipulation-slider-with-css-filters.markdown

Image Manipulation Slider with CSS Filters

A Pen by Caleb Zahnd on CodePen.

License.

index.html

<h1>Drag the black border</h1>
<div class='alpha'>
  <div class='bravo'>
    <textarea readonly cols='0' rows='0' class='charly'></textarea>
  </div>
</div>

style.scss

$photo: 'http://www.technocrazed.com/wp-content/uploads/2013/07/Beautiful-landscape-photography-20.jpg';
$filter:  hue-rotate(180deg);

/*
Try some of these filter values:
grayscale(100%)
sepia(60%)
saturate(30%)
hue-rotate(180deg)
brightness(2)
contrast(200%)
grayscale(50%)
invert(100%)

Also, consider stacking filters:
sepia(100%) hue-rotate(90deg)
grayscale(100%) contrast(140%)
*/

@import url(https://fonts.googleapis.com/css?family=Roboto:300);
html {
  background: #ddd;
  height: 100%;
  width: 100%;
  font-family: Roboto;
  font-weight: 300;
}
.alpha {
  background-image: url($photo); 
  width: 620px;
  height: 402px;
  border: 0px solid #000;
  padding: 0;
  margin: 1rem auto;
  position: relative;
  overflow: hidden;
}

.bravo {
  background-image: url($photo);
  filter: $filter;
  height: 402px;
  resize: horizontal; 
  position: absolute; 
  top: 0; left: 0; 
  min-width: 0;
  max-width: 620px; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
}
.bravo:before {
  font-family: FontAwesome;
  content: '\f07e';
  background: rgba(0,0,0,.7);
  font-size: 18px; 
  color: white; 
  top: 0; right: 0px;
  height: 100%;
  line-height: 402px;
  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;
}
h1 {
  text-align: center;
  color: #2FB4E1;
  font-size: 2rem;
  line-height: 2rem;
  margin: 0;
}

styles

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />