Q:

Is there a way to do a liquid looking reveal for an image in CSS starting from the left-center? 

I saw this animation on an ad, and I'm looking for a way to do it with CSS, hopefully minimal to no JQuery.  I'm mostly looking for a way to do the image reveal with either an animation or a transition.  Something that works across all browsers. 

I started with this built off another fiddle I found, and for now it's revealed on hover instead of timed, but it's not coming out the same way as the gif. 
https://jsfiddle.net/ff43gn16/1/
HTML:
<div class="outer"> 
  <div class="middle">
    <div class="inner">
      <img src="http://i.imgur.com/hy35kqY.png?1">
    </div>
  </div>
  Hover Here
</div>

CSS:
.outer { 
    width: 90%; 
    height: 110px;
    background: #0C61A5;
}

.middle { 
    width: 0px; 
    height: 0px; 
    overflow: hidden; 
    border-top-right-radius: 50%;  
    border-bottom-right-radius: 50%;
    position: absolute;
    transition-property:all; 
    transition-duration: 1s;
}

.outer:hover > div { 
    width: 425px; 
    height: 110px; 
    border-radius: 0px; 
    margin-top: 0px; 
    margin-left: 0px;
}

.outer:hover > div > div { 
    margin-top: 0px; 
    margin-left: 0px
}

I think one of the reasons it's not looking right is that the animation is starting from the top and I'm not sure how to make it start the reveal from the centre.  It could also be that the way it's revealing isn't rounded enough. 

A:

One posibility is to use a pseudo element covering the image, and oculting it with a shadow. 
Then you can reveal it moving the pseudo

.container {
    width: 600px;
    height: 400px;
    position: relative;
    overflow: hidden;
    margin: 50px;
}

.container:after {
  content: "";
  position: absolute;
  width: 300%;
  height: 150%;
  background-color: transparent;
  top: -25%;
  border-radius: 100%;
  box-shadow: inset -900px 0px 140px 0px blue;
  transform: translateX(-950px);
  transition: transform 2s; 
}

.container:hover:after {
  transform: translateX(400px); 
}
.image {
    width: 600px;
    height: 400px;
      background-image: url(http://lorempixel.com/600/400/nature);
    background-size: cover;

}
<div class="container">
  <div class="image"></div>
  </div>

