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>
    <style>
  
      div {
        position: absolute;
        overflow: hidden;
        width: 300px;
        height: 170px;
      }
      
      h2 {
        position: relative;
        text-align: center;
        text-transform: uppercase;
        font-family: Futura, sans-serif;
        color: white;
        font-size: 22px;
        padding: 0 17px 0 17px;
        margin: -99px 0 0 0;
        z-index: 10;
      }
      
      .blurs {
        position: absolute;
        opacity: .125;
        left: 0;
        top: 0;
      }
      
      .blur-left {
        left: -2px;
      }
      
      .blur-right {
        left: 2px; 
      }
      
      .blur-top {
        top: -2px; 
      }
      
      .blur-bottom {
        top: 2px; 
      }
     
    </style>
  </head>
  <body> 
    <div>
      <img src="http://thomaspark.me/project/devour/mrrogers.jpg">
      <h2>Won't you be<br />my neighbor</h2>
      <img class="blurs blur-left" src="http://thomaspark.me/project/devour/mrrogers.jpg">
      <img class="blurs blur-left blur-top" src="http://thomaspark.me/project/devour/mrrogers.jpg">
      <img class="blurs blur-left blur-bottom" src="http://thomaspark.me/project/devour/mrrogers.jpg">
      <img class="blurs blur-right" src="http://thomaspark.me/project/devour/mrrogers.jpg">
      <img class="blurs blur-right blur-top" src="http://thomaspark.me/project/devour/mrrogers.jpg">
      <img class="blurs blur-right blur-bottom" src="http://thomaspark.me/project/devour/mrrogers.jpg">
      <img class="blurs blur-top" src="http://thomaspark.me/project/devour/mrrogers.jpg">
      <img class="blurs blur-bottom" src="http://thomaspark.me/project/devour/mrrogers.jpg">
    </div>
  </body>
</html>
 
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers