diff --git a/gr-opacity-diff-mode/gr-opacity-diff-mode.html b/gr-opacity-diff-mode/gr-opacity-diff-mode.html
new file mode 100644
index 0000000..71a5eff
--- /dev/null
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode.html
@@ -0,0 +1,54 @@
+<!--
+Copyright (C) 2018 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<dom-module id="gr-opacity-diff-mode">
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
+      img {
+        display: block;
+        margin:auto;
+        position: absolute;
+        width: 500px;
+      }
+      #imageRevision {
+        opacity: var(--my-opacity-value);
+        z-index: 1;
+      }
+      #imageDiv {
+        position: relative;
+        margin: auto;
+        width: 500px;
+      }
+    </style>
+    <div id="imageDiv">
+      <img id="imageBase"/>
+      <img id="imageRevision" data-opacity$="{{opacityValue}}"/>
+    </div>
+    <label for="opacitySlider">Opacity</label>
+    <input
+      type="range"
+      id="opacitySlider"
+      min="0.0"
+      max="1.0"
+      value="1.0"
+      step=".01"
+      on-input="handleOpacityChange"/>
+  </template>
+ <script src="gr-opacity-diff-mode.js"></script>
+</dom-module>
\ No newline at end of file
diff --git a/gr-opacity-diff-mode/gr-opacity-diff-mode.js b/gr-opacity-diff-mode/gr-opacity-diff-mode.js
new file mode 100644
index 0000000..b9016ee
--- /dev/null
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode.js
@@ -0,0 +1,45 @@
+// Copyright (C) 2018 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+(function() {
+  'use strict';
+  Polymer({
+    is: 'gr-opacity-diff-mode',
+
+    properties: {
+      baseImage: Object,
+      revisionImage: Object,
+      opacityValue: Number,
+    },
+
+    attached() {
+      if (this.revisionImage) {
+        const srcRevision = this.computeSrcString(this.revisionImage);
+        this.$.imageRevision.setAttribute('src', srcRevision);
+      }
+      if (this.baseImage) {
+        const srcBase = this.computeSrcString(this.baseImage);
+        this.$.imageBase.setAttribute('src', srcBase);
+      }
+    },
+
+    handleOpacityChange() {
+      this.customStyle['--my-opacity-value'] = this.$.opacitySlider.value;
+      this.updateStyles();
+    },
+
+    computeSrcString(image) {
+      return 'data:' + image['type'] + ';base64, ' + image['body'];
+    },
+  });
+})();
\ No newline at end of file
diff --git a/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html b/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html
new file mode 100644
index 0000000..f20db99
--- /dev/null
+++ b/gr-opacity-diff-mode/gr-opacity-diff-mode_test.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!--
+@license
+Copyright (C) 2018 The Android Open Source Project
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+<title>gr-opacity-diff-mode</title>
+
+<link rel="import" href="../node_modules/polymer/polymer.html">
+<link rel="import" href="../node_modules/@polymer/test-fixture/test-fixture.html">
+<link rel="import" href="../node_modules/iron-test-helpers/iron-test-helpers.html">
+<link rel="import" href="./gr-opacity-diff-mode.html">
+
+<script>void(0);</script>
+
+<script src="../node_modules/webcomponents.js/webcomponents-lite.min.js"></script>
+<script src="../node_modules/web-component-tester/browser.js"></script>
+<script src="../node_modules/@polymer/sinonjs/sinon.js"></script>
+
+<test-fixture id='opacity-diff-fixture'>
+  <template>
+    <gr-opacity-diff-mode></gr-opacity-diff-mode>
+  </template>
+</test-fixture>
+
+<script>
+  suite('gr-opacity-diff-tool tests', () => {
+    let element;
+
+    setup(() => {
+      stub('gr-opacity-diff-mode', {
+        attached() {},
+      });
+      element= fixture('opacity-diff-fixture');
+    });
+
+    test('slider changes opacity of image', () => {
+      const arrayOfNumbers = [0.73, 0.5, 0.0];
+      arrayOfNumbers.forEach(number => {
+        assert.notEqual(element.customStyle['--my-opacity-value'], number);
+        element.$.opacitySlider.value = number;
+        element.handleOpacityChange();
+        assert.equal(element.customStyle['--my-opacity-value'], number);
+      });
+    });
+
+    test('create the src string for images', () => {
+      element.revisionImage = {
+        type: 'IMG/src',
+        body: 'Zx3Cgffk=',
+      };
+      const expectedOutcome = 'data:IMG/src;base64, Zx3Cgffk=';
+      assert.equal(element.computeSrcString(element.revisionImage),
+          expectedOutcome);
+    });
+  });
+</script>
\ No newline at end of file
diff --git a/test/index.html b/test/index.html
index 6b86c35..24e1c10 100644
--- a/test/index.html
+++ b/test/index.html
@@ -25,6 +25,7 @@
 <script>
   const suites = [
     '../gr-image-diff-tool/gr-image-diff-tool_test.html',
+    '../gr-opacity-diff-mode/gr-opacity-diff-mode_test.html',
     '../gr-resemble-diff-mode/gr-resemble-diff-mode_test.html',
   ];