--- a/swtr/static/css/swtmaker.css
+++ b/swtr/static/css/swtmaker.css
@@ -50,12 +50,28 @@
   margin-bottom: 10px;
 }
 
+.ocd-item.col-md-4 {
+  width: 32.3333%;
+}
 .ocd-item {
   padding-bottom: 4px;
   border: 1px solid #ddd;
   border-radius: 4px;
-  margin-bottom: 20px;
+  margin: 0 5px 20px 5px;
   text-align: center;
+}
+.ocd-item-cover {
+  position: absolute;
+  border: 1px solid #ddd;
+  box-shadow: 1px 1px 3px #ccc;
+  width: 100%;
+  padding: 12px;
+  background: #fff;
+  height: 60px;
+  margin-left: -15px;
+}
+.ocd-item .text{
+  margin-top: 3px;
 }
 
 .thumb-image {
--- a/swtr/static/js/main.js
+++ b/swtr/static/js/main.js
@@ -466,6 +466,8 @@
     el: $('#ocd-view'),
     events: {
       'click .ocd-item a': 'onImgClick',
+      'click .ocd-item-cover .close': 'onCoverCloseClick',
+      'click .ocd-item-mark': 'onMarkClick',
       'click .pager li': 'onPagerClick'
     },
     initialize: function(opts) {
@@ -475,6 +477,7 @@
       this.page = 0;
       this.item_template = _.template($('#ocd-item-template').html());
       this.base_template = _.template($('#ocd-view-base-template').html());
+      this.cover_template = _.template($('#ocd-item-cover-template').html());
       this.render();
     },
     render: function() {
@@ -495,7 +498,8 @@
         $row_el.append(this.item_template({
           title: item._source.title,
           media_url: item._source.media_urls[0].url,
-          authors: item._source.authors
+          authors: item._source.authors,
+          description: item._source.description
         }));
       }, this);
       this.resolveOCDURLs();


@@ -557,11 +561,33 @@
       return false;
     },
     onImgClick: function(event) {
+      //console.log('onImgClick');
       event.preventDefault();
       // TODO: init the image anno
-      var url = $(event.currentTarget).find('img').attr('src');
+      this.highlightImg(event);
       //swtr.appView.loadURL(url, 'image');
       return false;
+    },
+    highlightImg: function(event) {
+      //console.log('highlightImg');
+      var elem = $(event.currentTarget).parent().parent();
+      // if .ocd-item-cover exists return
+      if(elem.find('.ocd-item-cover').length) {
+        return;
+      }
+      //console.log(elem);
+      elem.prepend(this.cover_template());
+      $(elem.find('.ocd-item-cover')[0]).slideDown('slow');
+    },
+    onCoverCloseClick: function(event) {
+      var elem = $(event.currentTarget).parent();
+      elem.slideUp('slow');
+      elem.remove();
+    },
+    onMarkClick: function(event) {
+      var url = $(event.currentTarget).parent().parent().
+        find('img').attr('src');
+      console.log('load image anno', url);
     },
     search: function(data, cb) {
       swtr.appView.$overlay.show();
--- a/swtr/templates/index.html
+++ b/swtr/templates/index.html
@@ -262,7 +262,16 @@
             <img src="" class="responsive thumb-image">
           </a>
         </div>
-        <div>Authors: <%= authors %> </div>
+        <div class="text">Authors: <%= authors %> </div>
+        <div class="text">Description: <%= description %> </div>
+      </div>
+    </script>
+    <script type="text/template" id="ocd-item-cover-template">
+      <div class="ocd-item-cover">
+        Mark and load this image to annotate
+        <button class="btn btn-xs btn-default pull-left ocd-item-mark">Mark</button>
+        <a class="close">&times;</a>
+        <div class="clearfix"></div>
       </div>
     </script>
     <script type="text/template" id="filter-users">