Can I move Image positions around in a tiled image section?

Question

I have an image gallery where as you scroll the four tiled image section appears. After it reveals itself I want the user to be able to hover over each image and for the image that is being hovered over to expand and fill the section.

/* 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>

Right now the Width is set to 50% and height at auto. If I put to set the width to 100% and height auto when you hover over it only position 1 expands to fill the section. So my solution was to have each image re position to position 1 in order to expand and fill the section. Not sure if thats the easiest solution. Right now position 1 seems to be the only position that correctly fills the section. the other positions either glitch or only fill have the section.