2 images . Width resize on both when hover.

2 images . Width resize on both when hover.

Hello. Thanks for reading this. I am new to jQuery and Jscript in general. I wanted to create an effect similar to this :  http://www.sony-asia.com/microsite/mdr-10/#homePage . On the first section you can see that when you hover over one of the 2 images the other fluidly responds and modifies it's  width. 

So I have tried to do it myself...I thought it was a simple problem but it turned out to be more than that. It works...but not as it should, it has silent errors and it is only working on chrome for some reason. The biggest issue is that  even though it works, sometimes the hover event gets stuck..or something and one of the images - the right one to be more precise just...dissapears and comes back again


I have used simple jQuery code to create this effect...more exactly I used the hover function with it's callback and the animate function. The code looks like this. 

      HTML
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>ACcordion Hover</title>
  7. <link rel="stylesheet" href="reset.css">
  8. <link rel="stylesheet" href="styles.css">

  10. </head>
  11. <body>

  13. <div class="wrapper">
  14.  <div class="item one"></div>
  15.  <div class="item two"></div>
  16. </div>

  18. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  19. <script src="script.js"></script>
  20. </body>
  21. </html>
      CSS

  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   -webkit-box-sizing: border-box;
  6.   -moz-box-sizing: border-box;
  7.   box-sizing: border-box;
  8. }

  10. .wrapper {
  11.   width: 100vw;
  12.   margin: 0 auto;
  13.   overflow: hidden;
  14.   border: 1px solid grey;
  15.   height:100vh;
  16.   position: relative;
  17. }

  19. .item {
  20.   height: 100%;
  21.   max-width: 70%;
  22.   background-position: left top;
  23.   transition: width 0.5s ease;
  24.   float: left;
  25. }

  27. .one {
  28. width: 40%;

  30.     background-color: blue;
  31.     background-repeat: no-repeat;
  32.     background-position: center; center;

  34. }
  35. .two {
  36. width: 60%;

  38. background-color: orange;
  39. background-repeat: no-repeat;
  40. background-position: center; center;
  41. }
JS

  2. $("document").ready(function(){

  4. var $one = $('.one'),
  5. $two = $('.two');

  7. $one.hover(function(){
  8. $one.stop().animate({width : '70%'});
  9. $two.stop().animate({width : '30%'});
  10. }, function() {
  11. $one.stop().animate({width : '30%'});
  12. $two.stop().animate({width : '70%'});
  13. });

  15. $two.hover(function() {
  16. $two.stop().animate({width : '70%'});
  17. $one.stop().animate({width : '30%'});
  18. }, function() {
  19. $two.stop().animate({width : '30%'});
  20. $one.stop().animate({width : '70%'});
  21. });

  23. });

I really need to learn how to think programatically O-o. Can anyone give me some advice ? All the answers I have found implied different images, or complicated scripts, and I know it can be done in an easier way.
Can it be done using css3 only? Thanks.