slider.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

    <style media="screen">
      .kyl_slider {
        margin: 0 auto;
        position: relative;
        overflow: hidden;
      }

      .kyl_slider .first, .kyl_slider .last {
        width: 50%;
      }

      .kyl_slider .divisor {
        position: absolute;
          top: -10%;
        z-index: 999;
        width: 42px;
        height: 556px;
        background-image: url(divisor.png);
        background-size: cover;
        background-repeat: no-repeat;
      }

      .kyl_slider .information {
        position: absolute;
        bottom: 5%;
        left: 3%;
        background-color:rgba(0, 0, 0, 0.6);
        padding: 10px;
        color: #FFF;
        text-transform: uppercase;
      }
    </style>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
$(function() {
        /**
            @author edmundo-rodrigues@hotmail.com.br
        */
        var configs = {
             "width": "720px",
            "height": "405px"
        }

        var slider = $(".kyl_slider").css(configs);
        var divisor_width = 42;
    var default_text  = "passe o mouse para comparar";

        slider.each(function () {
            var $$ = $(this);

      $$.append("<div class='information'>" + default_text + "</div>");
      $$.append("<div class='divisor'></div>");

            var back_css = {
                "background-size": "auto " + configs.height,
                "background-repeat": "no-repeat",
          "height": configs.height,
                "float": "left"
            };

            ["first", "last"].forEach(function (the_class) {
                var the_container = $$.find("." + the_class);

                var the_image     = the_container.removeClass(the_class).find("img");
                the_image.css("display", "none");

                the_container.addClass(the_class).css(back_css).css("background-image", "url("+ the_image.attr("src") +")");
            });

        });

    slider.find(".divisor").css("left", slider.width()/2 - divisor_width/2);

        slider.mousemove(function (event) {
                var $$ = $(this);

                var _x = event.pageX - $$.offset().left;

        if (_x < $$.width()/2)
          $$.find(".information").html("antes");
        else {

            $$.find(".information").html("depois");
        }

                if (_x < 15) {
                    _x = 0;
                    $$.find(".divisor").css("left", -(divisor_width/2) - 2);
                } else if (_x > $$.width() - 15) {
                    _x = $$.width();
                    $$.find(".divisor").css("left", _x - 20);
                } else
                    $$.find(".divisor").css("left", _x - 20);

                var _first = $$.find(".first").first();
                var _last  = $$.find(".last").last();

                _first.width(_x);
                _last.width($$.width() - _x);
        });
});
    </script>
  </head>
  <body>

    <div class="kyl_slider">
        <div class="first">
          <img src="1.jpg" />
        </div>

        <div class="last">
          <img src="2.jpg" />
        </div>
    </div>

  </body>
</html>