diff --git a/src/openseadragon.js b/src/openseadragon.js
index 2cb2ac0d..a907d84c 100644
--- a/src/openseadragon.js
+++ b/src/openseadragon.js
@@ -230,6 +230,9 @@
   * @property {Boolean} [flipped=false]
   *     Initial flip state.
   *
+  * @property {Boolean} [overlayContentFlipped=false]
+  *     Initial overlay content flip state.
+  *
   * @property {Number} [minZoomLevel=null]
   *
   * @property {Number} [maxZoomLevel=null]
@@ -1337,6 +1340,7 @@ function OpenSeadragon( options ){
 
             // INITIAL FLIP STATE
             flipped:                    false,
+            overlayContentFlipped:      false,
 
             // APPEARANCE
             opacity:                           1,
diff --git a/src/overlay.js b/src/overlay.js
index 6d355c7a..bed6b4c5 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -129,6 +129,7 @@
         }
 
         this.element = options.element;
+        this.element.innerHTML = "<div>" + this.element.innerHTML + "</div>";
         this.style = options.element.style;
         this._init(options);
     };
@@ -242,9 +243,6 @@
          */
         drawHTML: function(container, viewport) {
             var element = this.element;
-            var text = document.createElement('div');
-            text.textContent = element.textContent;
-            element.textContent = "";
             if (element.parentNode !== container) {
                 //save the source parent for later if we need it
                 element.prevElementParent = element.parentNode;
@@ -257,27 +255,23 @@
                 // least one direction when this.checkResize is set to false.
                 this.size = $.getElementSize(element);
             }
-
             var positionAndSize = this._getOverlayPositionAndSize(viewport);
-
             var position = positionAndSize.position;
             var size = this.size = positionAndSize.size;
-            var rotate;
-            var scale = "";
-            if (viewport.flipped){
-                rotate = -positionAndSize.rotate;
-                scale = " scaleX(-1)";
-            }
-            else {
-                rotate = positionAndSize.rotate;
+            var outerScale = "";
+            if (viewport.overlayContentFlipped) {
+                outerScale = viewport.flipped ? " scaleX(-1)" : " scaleX(1)";
             }
+            var rotate = viewport.flipped ? -positionAndSize.rotate : positionAndSize.rotate;
+            var scale = viewport.flipped ? " scaleX(-1)" : "";
             // call the onDraw callback if it exists to allow one to overwrite
             // the drawing/positioning/sizing of the overlay
             if (this.onDraw) {
                 this.onDraw(position, size, this.element);
             } else {
                 var style = this.style;
-                var textStyle = text.style;
+                var outerElement = element.firstChild;
+                var outerStyle = outerElement.style;
                 style.left = position.x + "px";
                 style.top = position.y + "px";
                 if (this.width !== null) {
@@ -292,23 +286,24 @@
                     'transform');
                 if (transformOriginProp && transformProp) {
                     if (rotate && !viewport.flipped) {
+                        outerStyle[transformProp] = "";
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = "rotate(" + rotate + "deg)";
                     } else if (!rotate && viewport.flipped) {
-                        textStyle[transformProp] = "scaleX(-1)";
+                        outerStyle[transformProp] = outerScale;
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = scale;
                     } else if (rotate && viewport.flipped){
-                        textStyle[transformProp] = "scaleX(-1)";
+                        outerStyle[transformProp] = outerScale;
                         style[transformOriginProp] = this._getTransformOrigin();
                         style[transformProp] = "rotate(" + rotate + "deg)" + scale;
                     } else {
+                        outerStyle[transformProp] = "";
                         style[transformOriginProp] = "";
                         style[transformProp] = "";
                     }
                 }
                 style.display = 'block';
-                element.appendChild(text);
             }
         },
 
diff --git a/src/viewer.js b/src/viewer.js
index d82a2d77..b918fab3 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -397,6 +397,7 @@ $.Viewer = function( options ) {
         viewer:                     this,
         degrees:                    this.degrees,
         flipped:                    this.flipped,
+        overlayContentFlipped:      this.overlayContentFlipped,
         navigatorRotate:            this.navigatorRotate,
         homeFillsViewer:            this.homeFillsViewer,
         margins:                    this.viewportMargins,
diff --git a/test/demo/overlay.html b/test/demo/overlay.html
index 527ebef3..bf5e3548 100644
--- a/test/demo/overlay.html
+++ b/test/demo/overlay.html
@@ -26,7 +26,8 @@
             prefixUrl: "../../build/openseadragon/images/",
             tileSources: "../data/testpattern.dzi",
             minZoomImageRatio: 0,
-            maxZoomPixelRatio: 10
+            maxZoomPixelRatio: 10,
+            overlayContentFlipped: true  // change this to true to test overlay content flipping
         });
 
         viewer.addHandler("open", function(event) {
@@ -42,6 +43,19 @@
                 rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
             });
 
+            // test with image of letter B to see that images flip too
+            elt = document.createElement("div");
+            elt.className = "runtime-overlay";
+            elt.style.outline = "1px solid blue";
+            elt.style.height = "100px";
+            elt.innerHTML = "<div><img src='../data/BBlue.png' width='100%' height='100%'/></div>"
+            viewer.addOverlay({
+                element: elt,
+                location: new OpenSeadragon.Point(0.0, 0.0),
+                width: 0.1,
+                height: 0.1
+            });
+
             elt = document.createElement("div");
             elt.className = "runtime-overlay";
             elt.style.background = "white";