SOURCE

const base = document.querySelector('.base'),
			ranger = document.querySelector('.ranger'),
      cover = document.querySelector('.cover').style,
			radius = (base.offsetWidth ** 2 + base.offsetHeight ** 2) ** 0.5;

ranger.oninput = () => cover.width = cover.height = `${ranger.value * radius}px`;

<div class="base"><div class="cover"></div></div>
<input class="ranger" type="range" min="0" max="1" value="0" step="0.01">

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.base {
  width: 400px;
  height: 250px;
  background: url('http://uisdc.qiniudn.com/wp-content/uploads/2014/07/085626mu0.jpg') no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}

.cover {
  width: 0;
  height: 0;
  background: url('http://uisdc.qiniudn.com/wp-content/uploads/2014/07/085626MGw.jpg') no-repeat;
  background-size: 400px 250px;
  border-bottom-right-radius: 100%;
}