Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

overlay designer's work on your DOM rendering

README.md

Use it now!

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

Screenshot

Why

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.

Features

  • 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)

Compare

I've found 2 other similar tools so far

Todo

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')

Contributors

  • 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

License

MIT License

Something went wrong with that request. Please try again.