diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index e23269ba24e..ac8d2a05a37 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -140,7 +140,7 @@ header a.navbar-brand img {
 }
 
 .css_non_editable_mode_hidden {
-  display: none;
+  display: none !important;
 }
 
 /* ----- BOOTSTRAP FIX ----- */
@@ -360,6 +360,63 @@ ul.nav-stacked > li > a {
   padding: 4px 0;
 }
 
+.o_image_floating {
+  width: 40%;
+  margin: 4px;
+}
+.o_image_floating div.o_container {
+  position: relative;
+}
+.o_image_floating div.o_container mark {
+  display: block;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  background-color: rgba(86, 61, 124, 0.25);
+}
+.o_image_floating div.o_container mark a {
+  color: white;
+}
+.o_image_floating.o_hide_link div.o_container mark {
+  display: none;
+}
+.o_image_floating.o_margin_s {
+  margin-bottom: 4px;
+}
+.o_image_floating.o_margin_s.pull-right {
+  margin-left: 8px;
+}
+.o_image_floating.o_margin_s.pull-left {
+  margin-right: 8px;
+}
+.o_image_floating.o_margin_m {
+  margin-bottom: 8px;
+}
+.o_image_floating.o_margin_m.pull-right {
+  margin-left: 12px;
+}
+.o_image_floating.o_margin_m.pull-left {
+  margin-right: 12px;
+}
+.o_image_floating.o_margin_l {
+  margin-bottom: 12px;
+}
+.o_image_floating.o_margin_l.pull-right {
+  margin-left: 16px;
+}
+.o_image_floating.o_margin_l.pull-left {
+  margin-right: 16px;
+}
+.o_image_floating.o_margin_xl {
+  margin-bottom: 24px;
+}
+.o_image_floating.o_margin_xl.pull-right {
+  margin-left: 32px;
+}
+.o_image_floating.o_margin_xl.pull-left {
+  margin-right: 32px;
+}
+
 /* Parallax Theme */
 div.carousel .carousel-indicators li {
   border: 1px solid grey;
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index 7a12771bd4c..2af5a79b634 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -288,6 +288,48 @@ ul.nav-stacked > li > a
 .hr
     padding: 4px 0
 
+
+.o_image_floating
+    width: 40%
+    margin: 4px
+    div.o_container
+        position: relative
+        mark
+            display: block
+            position: absolute
+            bottom: 0
+            width: 100%
+            background-color: rgba(86,61,124,.25)
+            a
+                color: white
+    &.o_hide_link div.o_container mark
+        display: none
+    &.o_margin_s
+        margin-bottom: 4px
+        &.pull-right
+            margin-left: 8px
+        &.pull-left
+            margin-right: 8px
+    &.o_margin_m
+        margin-bottom: 8px
+        &.pull-right
+            margin-left: 12px
+        &.pull-left
+            margin-right: 12px
+    &.o_margin_l
+        margin-bottom: 12px
+        &.pull-right
+            margin-left: 16px
+        &.pull-left
+            margin-right: 16px
+    &.o_margin_xl
+        margin-bottom: 24px
+        &.pull-right
+            margin-left: 32px
+        &.pull-left
+            margin-right: 32px
+
+
 /* Parallax Theme */
 
 div.carousel
diff --git a/addons/website/static/src/img/odoo.jpg b/addons/website/static/src/img/odoo.jpg
new file mode 100644
index 00000000000..e9c5ac231b1
Binary files /dev/null and b/addons/website/static/src/img/odoo.jpg differ
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 01e7749b98d..cee78689bda 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -101,6 +101,52 @@
         </section>
     </div>
 
+    <div name="Image-Text" class="o_block_image_float">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_image.png"/>
+            <span class="oe_snippet_thumbnail_title">Image-Floating</span>
+        </div>
+        <section class="oe_snippet_body para_large">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-12 mb16 mt16">
+                        <div class="o_image_floating o_margin_l pull-right">
+                            <div class="o_container">
+                                <img class="img img-rounded img-responsive" src="/website/static/src/img/odoo.jpg"/>
+                                <mark class="text-center"><a href="#"><strong>Click Here</strong></a></mark>
+                            </div>
+                            <div class="o_footer">
+                                <small class="text-muted">A great way to catch your reader's attention is to tell a story. Everything you consider writing can be told as a story.</small>
+                            </div>
+                        </div>
+                        <h3>What a day it was yesterday - such a big day for us!</h3>
+                        <p style="text-align: justify;">
+                            In case you still feel a bit puzzled about all
+                            of our yesterday's announcements, here is a little
+                            summary for you. <br/>
+                            We have decided to change the
+                            name because <b>"OpenERP"</b> didn't reflect the offering
+                            of the company anymore. With our newest apps, such
+                            as Website Builder, PoS or eCommerce, we have
+                            moved beyond the ERP territory. <br/>
+                            But <u>don't worry</u>, <b>Odoo</b> is and always will be
+                            fully open source. You can read more about the new name here.
+                            We have also prepared a short FAQ to explain all these changes
+                            to all of you. <br/>
+                        </p>
+                        <h3>Discover more about Odoo</h3>
+                        <p style="text-align: justify;">
+                            With Odoo's fully integrated software, you can easily manage your
+                            meetings, schedule business calls, create recurring meetings,
+                            synchronize your agenda and easily keep in touch with your colleagues,
+                            partners and other people involved in projects or business discussions.
+                            <br/><br/><a href="#">Check now and discover more today!</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
 
     <div>
         <div class="oe_snippet_thumbnail">
@@ -329,6 +375,21 @@
         </div>
     </div>
 
+    <div name="Image Floating" class="o_block_image_floating">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_text_image.png"/>
+            <span class="oe_snippet_thumbnail_title">Image Floating</span>
+        </div>
+        <div class="oe_snippet_body o_image_floating o_margin_l pull-right">
+            <div class="o_container">
+                <img class="img img-rounded img-responsive" src="/website/static/src/img/library/ipad.png"/>
+                <mark class="text-center"><a href="#"><strong>Click Here</strong></a></mark>
+            </div>
+            <div class="o_footer">
+                <small class="text-muted">A great way to catch your reader's attention is to tell a story. Everything you consider writing can be told as a story.</small>
+            </div>
+        </div>
+    </div>
 
     <div>
         <div class="oe_snippet_thumbnail">
@@ -928,7 +989,7 @@
     </div>
 
     <div data-snippet-option-id='content'
-        data-selector="blockquote, .well, .panel, .oe_share"
+        data-selector="blockquote, .well, .panel, .oe_share, .o_image_floating"
         data-selector-siblings="p, h1, h2, h3, blockquote, .well, .panel, .oe_share"
         data-selector-children=".content">
     </div>
@@ -938,6 +999,36 @@
         data-selector-children=".oe_structure, [data-oe-type=html]">
     </div>
 
+    <div data-snippet-option-id='image_floating_margin'
+        data-selector=".o_image_floating">
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Margin</a>
+            <ul class="dropdown-menu">
+                <li data-value="o_margin_xl"> <a>Extra-Large</a> </li>
+                <li data-value="o_margin_l"> <a>Large</a> </li>
+                <li data-value="o_margin_m"  > <a>Medium</a> </li>
+                <li data-value="o_margin_s"  > <a>Small</a></li>
+                <li data-value=""  > <a>None</a></li>
+            </ul>
+        </li>
+    </div>
+
+    <div data-snippet-option-id='image_floating_hidelink'
+        data-selector=".o_image_floating">
+        <li data-value="o_hide_link"><a>Hide link</a></li>
+    </div>
+
+    <div data-snippet-option-id='image_floating_side'
+         data-selector=".o_image_floating">
+        <li class="dropdown-submenu">
+            <a tabindex="-2" href="#">Float</a>
+            <ul class="dropdown-menu">
+                <li data-value="pull-left"><a>Left</a></li>
+                <li data-value="pull-right"><a>Right</a></li>
+            </ul>
+        </li>
+    </div>
+
     <div data-snippet-option-id='parallax'
         data-selector=".parallax">
         <li class="dropdown-submenu">