Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  
  
  <div class="model">
    <div class="gray"></div>
  </div>
  
  
</body>
</html>
 
/*
http://i.imgur.com/Tv0O1te.jpg
http://i.imgur.com/ozg5hsQ.jpg
*/
​
.model{
  position:relative;
  margin:0 auto;
  background: url('http://i.imgur.com/ozg5hsQ.jpg');
  width:236px;
  height:322px;
  overflow:hidden;
}
.gray{
  position:absolute;
  top:0;
  left:0;
  width:100px;
  height:100px;
  background: url('http://i.imgur.com/Tv0O1te.jpg');
  border-radius:50%;
}
 
$('.model').mousemove(function(e){
  
  var offs = $(this).offset(),
      p    = {x:offs.left, y:offs.top},
      mPos = {x:e.pageX, y:e.pageY},
      x    = mPos.x - p.x - 50,
      y    = mPos.y - p.y - 50;
  $('.gray', this).css({left:x, top:y, backgroundPosition: -x+'px '+-y+'px'});
    
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers