diff --git a/html/document.js b/html/document.js
index 6aedc34..8c25ada 100644
--- a/html/document.js
+++ b/html/document.js
@@ -175,6 +175,7 @@ const data = {
 	style,
 	runing: false,
 	convolutes,
+	diff: false,
 };
 
 
diff --git a/html/document.less b/html/document.less
index 1dd5fcb..8ae757b 100644
--- a/html/document.less
+++ b/html/document.less
@@ -67,7 +67,7 @@ canvas{
     canvas{
 
     }
-    &:active{
+    &[data-diff]{
         img{
             opacity: 1;
         }
diff --git a/html/index.html b/html/index.html
index 83bf4d3..895c71c 100644
--- a/html/index.html
+++ b/html/index.html
@@ -18,7 +18,13 @@
 		<!-- <img src="../one-last-image-logo-color.png"> -->
 	</header>
 	<div>
-		<div class="output-box" :data-cover="style.cover">
+		<div class="output-box" 
+			:data-cover="style.cover"
+			:data-diff="diff"
+			@touchstart.prevent="diff = true"
+			@touchend.prevent="diff = false"
+			@mousedown.prevent="diff = true"
+			@mouseup.prevent="diff = false">
 			<img src="images/asuka-8.jpg" @load="setImageAndDraw">
 			<canvas ref="canvas"></canvas>
 		</div>