Skip to content
overlay designer's work on your DOM rendering
JavaScript CoffeeScript CSS Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Use it now!

Store the bookmarklet from this page and load OverlayMe on top of any web page!



The purpose of this tool is to help the developer to meet designers requirements by overlaying images on the page.

We were struggling to see the gap between designers photoshop files and our HTML/CSS implementation, the best way to figure it out was to load their rendered work in the page and play with opacity to see the differences, that's what this tool facilitate.


  • overlay images over a web page
    • move each image by mouse drag or using the arrows (shift arrow to move quicker)
    • position and opacity of each image is saved
    • images can be added on the fly, and will remained
    • hideable / collapsible menu ('h' and 'c' keys)
  • HTML on top of the overlays
    • page content can be brought back on top of the overlays ('t' key)
    • control the opacity of the page content
    • keep on playing with the CSS while having the visual overlay by transparency

note: All persistence is made locally to your browser (using HTML5 localStorage)


I've found 2 other similar tools so far


Rack/Rails project integration

There is a gem rack-overlay_me that can help you :)

Known problems

  • you can't find the panel? it's probably hidden aside (previous bigger screen location) or hidden (press 'h')
  • you see the overlay but can't drag it? the 'Content on Top' option is probably on (press 't')


  • Tim Petricola - did refactor/clean most of the code, and came up with a nicer design
  • Rufus Post - at the origin of the ovelaying concept using CSS
  • Dan Smith - User Experience Strategist and Califloridian
  • Joseph Boiteau - original author


MIT License

Something went wrong with that request. Please try again.