Demo

Click on any visual element to see ContentOverlay

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

Source code on GitHub : https://github.com/SantaMariaTeam/ContentOverlay

How to use

Dependencies :


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

Load content-overlay files :


<link rel="stylesheet" href="content-overlay.css">
<script type="text/javascript" src="content-overlay.js"></script>

Append your overlay html code, example :


<div id="content-overlay"><div>
  <i class="fa fa-arrows"></i>
  <i class="fa fa-code"></i>
  <i class="fa fa-plus"></i>
  <i class="fa fa-trash"></i>
</div></div>

Activate content-overlay on node with class="editable" :


$('.editable')
  .contentOverlay()
  .on('show', function(e) {
    console.log('overlay is activated on ', e.target);
  })
  .on('hide', function(e) {
    console.log('overlay is disabled on ', e.target);
  });

hide method :


$('.editable').contentOverlay('hide');

Demo

How to use

Screenshot