我可以在平铺图像部分中移动图像位置吗？

问：

我有一个图片库，当您滚动时，会出现四个平铺的图像部分。在它显示自己之后，我希望用户能够将鼠标悬停在每张图像上，并让悬停在图像上以展开和填充该部分。

/* this is the CSS */

   .section .tiles img {
      width: 50%;
      float: left;
      height: auto;
      opacity: 0.7;
      -moz-transition: 0.3s ease-in-out all;
      -o-transition: 0.3s ease-in-out all;
      -webkit-transition: 0.3s ease-in-out all;
      transition: 0.3s ease-in-out all;
    }

      .section .tiles img:hover {
        cursor: pointer;
        opacity: 1;
      }

<!-- here is the HTML -->
        
        <div class="right tiles">
           <img src="../badAppleimg/colorPalatteDarkRed.jpg" />
           <img src="../badAppleimg/colorPaletteOffWhite.jpg" />
           <img src="../badAppleimg/colorPalatteCream.jpg" />
           <img src="../badAppleimg/colorPaletteRed.jpg" />
        </div>

现在，“宽度”设置为“50%，高度”设置为“自动”。如果我将宽度设置为 100%，当您将鼠标悬停在它上面时，只有位置 1 会展开以填充该部分。因此，我的解决方案是将每个图像重新定位到位置 1，以便扩展和填充该部分。不确定这是否是最简单的解决方案。现在，位置 1 似乎是唯一正确填充该部分的位置。其他位置要么出现故障，要么仅填充有该部分。