I am trying to scale an image when you mouseenter, which is working. I would like the image to gradually scale up with an ease transition. I used ease-in-out, which it's not working. Any suggestions?

Also, I used addClass & removeClass twice in the jquery code. Is there a way to only use it once?

Thanks!

 <style>
    .image {
      opacity: 0.5;
    }

    .image.opaque {
      opacity: 1;
    }

    .size{
    transform:scale(1.2);
    -ms-transform:scale(1.2); /* IE 9 */
    -webkit-transform:scale(1.2); /* Safari and Chrome */
    -webkit-transition: scale 2s ease-in-out;
    -moz-transition: scale 2s ease-in-out;
    -o-transition: scale 2s ease-in-out;
    -ms-transition: scale 2s ease-in-out;    
    transition: scale 2s ease-in-out;
     transition: opacity 2s;
      }
  </style>



 <script>
    $(document).ready(function() {

      $(".image").mouseenter(function() {
        $(this).addClass("opaque");
        $(this).addClass("size");
      });

      $(".image").mouseleave(function() {
       $(this).removeClass("opaque");
        $(this).removeClass("size");
      });

    });
 <div id="gallery">
    <h3>Gallery of images</h3>
    <img class="image" src="images/gnu.jpg" height="200px" width="250px">
    <img class="image" src="images/tiger.jpg" height="200px" width="250px">
    <img class="image" src="images/black_rhino.jpg" height="200px" width="250px">
    <img class="image" src="images/cape_buffalo.jpg" height="200px" width="250px">
  </div>