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>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
</head>
<body>
    <div class="modal-backdrop"></div>
    <div class="modal-panel">mouse over me</div>
</body>
</html>
 
.modal-backdrop {
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(http://imgur.com/oVaQJ8F.png);
​
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
}
​
.modal-panel {
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    background-image: url(http://imgur.com/oVaQJ8F.png);
​
    z-index: 1;
    position: fixed;
    top: 42.4%;
    left: 15.2%;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    border-radius: 10px;
    box-shadow: 1px 1px 3px black;
    line-height: 200px;
    text-align: center;
    color: white
}
​
* {
    font-family: Arial, sans-serif;
}
​
 
let modal = document.querySelector('.modal-panel');
​
document.body.addEventListener('mousemove', e => {modal.style.left = e.clientX + 'px'; modal.style.top = e.clientY + 'px'})
Output

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

Dismiss x
public
Bin info
neaumusicpro
0viewers