diff --git a/src/mapml.css b/src/mapml.css
index 3f747e39d..91f9c83a9 100644
--- a/src/mapml.css
+++ b/src/mapml.css
@@ -74,6 +74,21 @@
   color: revert;
 }
 
+/* Style Legend */
+.legendLink span { 
+	position: absolute;
+	visibility: hidden;
+}
+.legendLink:hover span, .legendLink:focus span { 
+	visibility:visible;
+  left: 0;
+	right: auto;
+	z-index: 1;
+}
+.legendLink img { 
+	max-width: 200px;
+}
+
  .leaflet-top .leaflet-control {
    margin-top: 5px;
  }
diff --git a/src/mapml/layers/MapMLLayer.js b/src/mapml/layers/MapMLLayer.js
index 603fcf200..51a5076b7 100644
--- a/src/mapml/layers/MapMLLayer.js
+++ b/src/mapml/layers/MapMLLayer.js
@@ -651,10 +651,17 @@ export var MapMLLayer = L.Layer.extend({
 
         if (this._legendUrl) {
           var legendLink = document.createElement('a');
+          var viewerSpan = document.createElement('span');
+          var legendImg = document.createElement('img');
           legendLink.text = ' ' + this._title;
           legendLink.href = this._legendUrl;
           legendLink.target = '_blank';
           legendLink.draggable = false;
+          legendLink.setAttribute('class', 'legendLink');
+          legendImg.src = this._legendUrl;
+          legendImg.alt = "Legend for " + this._title;
+          viewerSpan.appendChild(legendImg);
+          legendLink.appendChild(viewerSpan);
           layerItemName.appendChild(legendLink);
         } else {
           layerItemName.innerHTML = this._title;