Click to view images full-size in website tutorials.

PiperOrigin-RevId: 623027970

website/src/_includes/partials/inset-image-small.liquid

@@ -1,4 +1,9 @@
 <div class="mdl-cell mdl-cell--6-col mdl-cell--3-col-tablet mdl-cell--2-col-phone">
-  <img class="tutorial-image" src="{% root %}{{ image }}"/>
+  <img class="tutorial-image" src="{% root %}{{ image }}"
+    onclick="event.target.nextElementSibling.showPopover()" />
+  <div class="tutorial-image-popover" popover>
+    <img class="tutorial-image" src="{% root %}{{ image }}"
+      onclick="event.target.parentElement.hidePopover()" />
+  </div>
   <div class="tutorial-caption">{{ caption }}</div>
 </div>

website/src/_includes/partials/inset-image.liquid

@@ -1,4 +1,9 @@
 <div class="mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--4-col-phone">
-  <img class="tutorial-image" src="{% root %}{{ image }}"/>
+  <img class="tutorial-image" src="{% root %}{{ image }}"
+    onclick="event.target.nextElementSibling.showPopover()" />
+  <div class="tutorial-image-popover" popover>
+    <img class="tutorial-image" src="{% root %}{{ image }}"
+      onclick="event.target.parentElement.hidePopover()" />
+  </div>
   <div class="tutorial-caption">{{ caption }}</div>
 </div>

website/src/assets/css/new.css

@@ -483,9 +483,31 @@ h5 {
   display: inline-block;
 }
 
-
 .tutorial-image {
   width: 100%;
+  cursor: zoom-in;
+}
+
+.tutorial-image-popover {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  pointer-events: none; /* click to close image */
+}
+
+.tutorial-image-popover .tutorial-image {
+  max-width: calc(100vw - 80px);
+  max-height: calc(100vh - 80px);
+
+  cursor: zoom-out;
+  /* block the default popover close; we'll use js instead */
+  pointer-events: all;
+  /* in case image itself has transparency */
+  background: white;
+}
+
+.tutorial-image-popover::backdrop {
+  background: rgba(0, 0, 0, 0.60);
 }
 
 .tutorial-page-container p,