diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 3f2530fccaa..22342237428 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -151,43 +151,39 @@ table.editorbar-panel td.selected {
 .oe_snippet {
   display: inline-block;
   vertical-align: top;
-  background: white;
   width: 120px;
   height: 120px;
   border-radius: 3px;
   margin: 10px;
   margin-right: 0px;
   position: relative;
-  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   -webkit-user-select: none;
   user-select: none;
   cursor: move;
-}
-.oe_snippet .oe_snippet_thumbnail.oe_label {
-  text-align: center;
-  background: #747474;
-  background-image: radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
-  height: 100%;
-  line-height: 120px;
-  color: white;
-  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95);
-  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset;
-}
-.oe_snippet .oe_snippet_body {
-  display: none;
-}
-.oe_snippet > * {
   pointer-events: none;
 }
-.oe_snippet > :not(.oe_snippet_body):not(.oe_snippet_thumbnail) {
+.oe_snippet .oe_snippet_thumbnail.oe_label {
+  pointer-events: auto;
+  text-align: center;
+  height: 100%;
+  line-height: 120px;
+  background: transparent;
+  color: white;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95);
+  position: relative;
+}
+.oe_snippet .oe_snippet_thumbnail.oe_label span, .oe_snippet .oe_snippet_thumbnail.oe_label div {
+  line-height: 18px;
+}
+.oe_snippet > :not(.oe_snippet_thumbnail) {
   display: none !important;
 }
-.oe_snippet > *:first-child:not(.oe_snippet_thumbnail) {
-  display: block;
-  -webkit-transform-origin-x: 5px;
-  -webkit-transform-origin-y: 10px;
-  -webkit-transform: scale(0.095);
+
+#oe_snippets .oe_snippet_thumbnail.oe_label {
+  background: #747474;
+  background-image: radial-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
+  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset;
 }
 
 /* ---- SNIPPETS DROP ZONES ---- */
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 3c8511450ed..82bcb8ffd47 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -140,41 +140,36 @@ table.editorbar-panel
 .oe_snippet
     display: inline-block
     vertical-align: top
-    background: white
     width: 120px
     height: 120px
     border-radius: 3px
     margin: 10px
     margin-right: 0px
     position: relative
-    box-shadow: 0px 3px 10px rgba(0,0,0,0.2)
     overflow: hidden
     -webkit-user-select: none
     user-select: none
     cursor: move
+    pointer-events: none
 
     .oe_snippet_thumbnail.oe_label
+        pointer-events: auto
         text-align: center
-        background: rgb(116, 116, 116)
-        background-image: radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4))
         height: 100%
         line-height: 120px
+        background: transparent
         color: white
         text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.95)
-        box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset
-
-    .oe_snippet_body
-        display: none
-    & > *
-        pointer-events: none
-    & > :not(.oe_snippet_body):not(.oe_snippet_thumbnail)
+        position: relative
+        span, div
+            line-height: 18px
+    & > :not(.oe_snippet_thumbnail)
         display: none !important
 
-    & > *:first-child:not(.oe_snippet_thumbnail)
-        display: block
-        -webkit-transform-origin-x: 5px
-        -webkit-transform-origin-y: 10px
-        -webkit-transform: scale(0.095)
+#oe_snippets .oe_snippet_thumbnail.oe_label
+    background: rgb(116, 116, 116)
+    background-image: radial-gradient(rgba(0,0,0,0.25),rgba(0,0,0,0.4))
+    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.07) inset
 
 
 /* ---- SNIPPETS DROP ZONES ---- */
diff --git a/addons/website/static/src/js/website.snippets.js b/addons/website/static/src/js/website.snippets.js
index 6edb73ab05b..c9e366b116f 100644
--- a/addons/website/static/src/js/website.snippets.js
+++ b/addons/website/static/src/js/website.snippets.js
@@ -74,7 +74,7 @@
         },
         dom_filter: function (dom) {
             if (typeof dom === "string") {
-                var exclude = ":not(#oe_manipulators):not(#website-top-navbar)";
+                var exclude = ":not(#oe_manipulators):not(#website-top-navbar):not(.oe_snippet)";
                 var sdom = dom.split(',');
                 dom = "";
                 _.each(sdom, function (val) {
@@ -86,7 +86,7 @@
                 dom = dom.replace(/,\s*$/g, '');
                 return $(dom);
             } else {
-                return $(dom).parents("#oe_manipulators, #website-top-navbar").length ? $() : $(dom);
+                return $(dom).parents("#oe_manipulators, #website-top-navbar").length || $(dom).hasClass("oe_snippet") ? $("") : $(dom);
             }
         },
         start: function() {
@@ -111,14 +111,12 @@
             var pos = $target.offset();
             var mt = parseInt($target.css("margin-top") || 0);
             var mb = parseInt($target.css("margin-bottom") || 0);
-            var ml = parseInt($target.css("margin-left") || 0);
-            var mr = parseInt($target.css("margin-right") || 0);
             $el.css({
                 'position': 'absolute',
-                'width': $target.outerWidth() + ml + mr,
+                'width': $target.outerWidth(),
                 'height': $target.outerHeight() + mt + mb,
                 'top': pos.top - mt,
-                'left': pos.left - ml
+                'left': pos.left
             });
         },
         show: function () {
@@ -212,6 +210,7 @@
             var $selected_target = null;
             $("body").mouseover(function (event){
                 var $target = $(event.srcElement).parents("[data-snippet-id]:first");
+                $target = self.dom_filter($target);
                 if($target.length && !self.editor_busy) {
                     if($selected_target != $target){
                         if($selected_target && $selected_target.data('overlay')){
@@ -544,7 +543,6 @@
                 greedy: true,
                 appendTo: 'body',
                 cursor: "move",
-                distance: 20,
                 handle: ".js_box_move",
                 cursorAt: {left: $move.outerWidth()/2, top: $move.find(".oe_move").outerHeight()/2},
                 helper: function() {
@@ -783,7 +781,7 @@
             this.grid.e = [_.map(grid, function (v) {return 'col-md-'+v;}), _.map(grid, function (v) {return width/12*v;})];
 
             var grid = [-12,-11,-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10,11];
-            this.grid.w = [_.map(grid, function (v) {return 'col-lg-offset-'+v;}), _.map(grid, function (v) {return width/12*v;}), 12];
+            this.grid.w = [_.map(grid, function (v) {return 'col-md-offset-'+v;}), _.map(grid, function (v) {return width/12*v;}), 12];
 
             return this.grid;
         },
@@ -793,15 +791,15 @@
 
             // don't change the rigth border position when we change the offset (replace col size)
             var beginCol = Number(beginClass.match(/col-md-([0-9]+)|$/)[1] || 0);
-            var beginOffset = Number(beginClass.match(/col-lg-offset-([0-9-]+)|$/)[1] || 0);
-            var offset = Number(this.grid.w[0][current].match(/col-lg-offset-([0-9-]+)|$/)[1] || 0);
+            var beginOffset = Number(beginClass.match(/col-md-offset-([0-9-]+)|$/)[1] || beginClass.match(/col-lg-offset-([0-9-]+)|$/)[1] || 0);
+            var offset = Number(this.grid.w[0][current].match(/col-md-offset-([0-9-]+)|$/)[1] || 0);
 
-            this.$target.attr("class",this.$target.attr("class").replace(/\s*(col-lg-offset-|col-md-)([0-9-]+)/g, ''));
+            this.$target.attr("class",this.$target.attr("class").replace(/\s*(col-lg-offset-|col-md-offset-|col-md-)([0-9-]+)/g, ''));
 
             var colSize = beginCol - (offset - beginOffset);
             this.$target.addClass('col-md-' + (colSize > 12 ? 12 : colSize));
             if (offset > 0) {
-                this.$target.addClass('col-lg-offset-' + offset);
+                this.$target.addClass('col-md-offset-' + offset);
             }
         },
     });
diff --git a/addons/website/static/src/xml/website.snippets.xml b/addons/website/static/src/xml/website.snippets.xml
index 19b86056a0a..08028f18087 100644
--- a/addons/website/static/src/xml/website.snippets.xml
+++ b/addons/website/static/src/xml/website.snippets.xml
@@ -77,7 +77,11 @@
         </li>
 
         <!-- thumbnail to display inside the bottom widget list editor -->
-        <div class='oe_snippet_thumbnail oe_label'>Banner</div>
+        <div class='oe_snippet_thumbnail oe_label'>
+            <img src="/website/static/src/img/banner/color_splash.jpg" style="position: absolute; left: 0; top: 40px; max-width: 100%"/>
+            <img src="/website/static/src/img/banner/banner_picture.png" style="position: absolute; left: 10px; top: 52px; max-width: 25%"/>
+            <span style="position: absolute; top: 50px; right: 10px;">Banner</span>
+        </div>
 
         <!-- body to insert after drag and drop thumbnail -->
         <div id="myCarousel" class="oe_snippet_body carousel slide oe_big" data-interval="10000">
@@ -149,7 +153,10 @@
     </div>
 
     <div t-name="website.snippets.text-image" data-snippet-id='text-image' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
-        <div class='oe_snippet_thumbnail oe_label'>Text-Image</div>
+        <div class='oe_snippet_thumbnail oe_label'>
+            <span style="position: absolute; top: 50px; left: 5px;">Text-Image</span>
+            <img src="/website/static/src/img/banner/banner_picture.png" style="position: absolute; right: 5px; top: 50px; max-width: 28%"/>
+        </div>
         <section class="oe_snippet_body dark">
             <div class="container">
                 <div class="row">
@@ -176,7 +183,10 @@
     </div>
 
     <div t-name="website.snippets.image-text" data-snippet-id='image-text' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
-        <div class='oe_snippet_thumbnail oe_label'>Image-Text</div>
+        <div class='oe_snippet_thumbnail oe_label'>
+            <img src="/website/static/src/img/banner/banner_picture.png" style="position: absolute; left: 5px; top: 50px; max-width: 28%"/>
+            <span style="position: absolute; top: 50px; right: 5px;">Image-Text</span>
+        </div>
         <section class="oe_snippet_body">
             <div class="container">
                 <div class="row">
@@ -202,7 +212,17 @@
     </div>
 
     <div t-name="website.snippets.jumbotron" data-snippet-id='jumbotron' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
-        <div class='oe_snippet_thumbnail oe_label'>Jumbotron</div>
+        <div class='oe_snippet_thumbnail oe_label'>
+            <div style="position: absolute; top: 30px; background-color: #eee; width: 100%; padding: 8px 0 6px 4px;">
+                <div style="color: #000; display: block; text-align: left;">
+                    Jumbotron
+                    <div style="font-size: 9px; line-height: 9px; text-shadow: none;">
+                        Jumbotron Sub-title
+                        <br/><span class="label label-primary">Contact us</span>
+                    </div>
+                </div>
+            </div>
+        </div>
         <section class="oe_snippet_body jumbotron mt16 mb16">
             <div class="container">
                 <h1>Sell Online. Easily.</h1>
@@ -219,7 +239,23 @@
     </div>
 
     <div t-name="website.snippets.text-block" data-snippet-id='text-block' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
-        <div class='oe_snippet_thumbnail oe_label'>Text Block</div>
+        <div class='oe_snippet_thumbnail oe_label'>
+            <div style="position: absolute; top: 26px; left: 5px;  width: 94%;">
+                <div style="display: block;">
+                    Text Block
+                    <div style="text-shadow: none;font-size: 9px; line-height: 9px; color: #bbb;margin-bottom: 5px;">
+                        Jumbotron Sub-title
+                    </div>
+                    <div style="text-shadow: none;font-size: 6px; line-height: 6px; text-align: left;">
+                        Organize projects around your own processes. Work
+                        on tasks and issues using the kanban view, schedule
+                        tasks using the gantt chart and control deadlines
+                        in the calendar view. Every project may have it's
+                        own stages allowing teams to optimize their job.
+                    </div>
+                </div>
+            </div>
+        </div>
         <section class="oe_snippet_body mt16 mb16">
             <div class="container">
                 <div class="row">
@@ -250,13 +286,28 @@
     </div>
 
     <div t-name="website.snippets.hr" data-snippet-id='hr' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
-        <div class='oe_snippet_thumbnail oe_label'>Separator</div>
+        <div class="oe_snippet_thumbnail oe_label">
+            <hr style="position: absolute;top: 61px;margin: 0;width: 100%;border-color: #888;"/>
+            <div style="position: absolute;width: 100%;top: 51px;">Separator</div>
+        </div>
         <hr class="oe_snippet_body"/>
     </div>
 
 
     <div t-name="website.snippets.big-picture" data-snippet-id='big-picture' data-category='structure' data-selector-children='.oe_structure, [data-oe-type=html]'>
-        <div class='oe_snippet_thumbnail oe_label'>Big Picture</div>
+        <div class='oe_snippet_thumbnail oe_label'>
+            <div style="position: absolute; top: 14px; left: 5px;  width: 94%;">
+                <div style="display: block;">
+                    Big Picture
+                    <img src="/website/static/src/img/big_picture.png" style="max-width: 100%"/>
+                    <div style="text-shadow: none;font-size: 6px; line-height: 6px; margin: 5px 10px">
+                        OpenERP's Point of Sale introduces a super clean
+                        interface with no installation required.
+                    </div>
+                </div>
+            </div>
+
+        </div>
         <section class="oe_snippet_body dark mt16 mb16">
             <div class="container">
                 <div class="row">