Slightly enlarge images on hover in the mosaic view

chrome/browser/resources/file_manager/css/gallery.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 body {
   -webkit-user-select: none;
   font-family: Open Sans, Droid Sans Fallback, sans-serif;
   font-size: 84%;
   margin: 0;
 }
@@ skipping 1097 matching lines @@
 
 .mosaic::-webkit-scrollbar-thumb {
   background: rgb(31, 31, 31);
 }
 
 .gallery:not([mode='mosaic']) .mosaic::-webkit-scrollbar-thumb {
   background: transparent;
 }
 
 .mosaic-tile {
+  /* Tile's zoom factor is animated on hover. We apply the transform to
+  the entire tile so that the image outline is included into the animation. */
+  -webkit-transition: -webkit-transform 150ms linear;
   position: absolute;
 }
 
 /* Mosaic tile's opacity is controlled by |visible| attribute which changes
    separately from .gallery[mode] */
-.mosaic:not([visible]) .mosaic-tile {
+.mosaic:not([visible]) .mosaic-tile .img-border {
   opacity: 0;
 }
 
 /* Animate tile's opacity, except for the selected tile which should show/hide
   instantly (this looks better when zooming to/from the slide mode). */
-.mosaic-tile:not([selected]) {
+.mosaic-tile:not([selected]) .img-border {
   -webkit-transition: opacity 350ms linear;
 }
 
 /* Must be in sync with mosaic_mode.js.
   Mosaic.Layout.SPACING should be equal to
     top + bottom + border-top-width + border-bottom-width AND
     left + right + border-left-width + border-right-width */
 .mosaic-tile .img-border {
   border: 1px solid transparent;  /* Space between the outline and the image. */
   bottom: 4px;
   left: 4px;
   outline: 2px solid transparent;
   overflow: hidden;
   position: absolute;
   right: 4px;
   top: 4px;
 }
 
 /* Selected and hover state are only visible when zoom transition is over. */
 .mosaic[visible='normal'] .mosaic-tile[selected] .img-border {
   outline-color: rgb(51, 153, 255);
 }
 
+.mosaic[visible='normal'].hover-visible .mosaic-tile:hover {
+  -webkit-transform: scale(1.05);
+}
+
 .mosaic[visible='normal'].hover-visible
                           .mosaic-tile:hover:not([selected]) .img-border {
   outline-color: rgb(182, 212, 252);
 }
 
 .mosaic-tile .img-wrapper {
   bottom: 0;
   left: 0;
   position: absolute;
   right: 0;
@@ skipping 16 matching lines @@
 .gallery:not([mode='slide']) .arrow-box {
   opacity: 0;
   pointer-events: none;
 }
 
 /* Temporary. Remove this along with the delete confirmation dialog
   when Undo delete is implemented. */
 .cr-dialog-shield {
   background-color: black;
 }