<div id="wrapper">
      <div id="hover_1" class="hover">
        <img src='http://lorempixel.com/200/400'/>
        <p class="caption">Can I has a nap?</p>
      </div>
      <div id="hover_2" class="hover">
        <img src='http://lorempixel.com/200/300'/>
        <p class="caption">I is aware.</p>
      </div>
      <div id="hover_3" class="hover">
        <img src='http://lorempixel.com/200/350'/>
        <p class="caption">Wut?</p>
      </div>
    </div>
body,html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: auto;
  font-family: sans-serif;
  background: #ddd;
}

#wrapper {
  position: absolute;
  width: 400px;
  height: 110px;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -50px;
  padding: 0;
}

.hover {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 110px;
  overflow: hidden;
  margin: 0 10px;
  border: 5px solid #fff;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transition: -webkit-transform 0.1s linear;
  -moz-transition: -moz-transform 0.1s linear;
  -o-transition: -o-transform 0.1s linear;
  -ms-transition: -ms-transform 0.1s linear;
  transition: transform 0.1s linear;

  -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
  box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
  cursor: pointer;
}

.hover img {
  width: 100%;

  -webkit-transition: 0.1s linear;
  -moz-transition: 0.1s linear;
  -o-transition: 0.1s linear;
  -ms-transition: 0.1s linear;
  transition: 0.1s linear;

  -webkit-transition-property: width;
  -moz-transition-property: width;
  -o-transition-property: width;
  -ms-transition-property: width;
  transition-property: width;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
}

.hover .caption {
  position: absolute;
  bottom: -100%;
  color: white;
  background: rgba(0,0,0,0.4);
  padding: 5px;
  margin: 0px;
  width:100%;

  -webkit-transition: bottom 0.1s ease-out;
  -moz-transition: bottom 0.1s ease-out;
  -o-transition: bottom 0.1s ease-out;
  -ms-transition: bottom 0.1s ease-out;
  transition: bottom 0.1s ease-out;
}

.hover:hover {
  -webkit-transform: scale(1.2,1.2);
  -moz-transform: scale(1.2,1.2);
  -o-transform: scale(1.2,1.2);
  -ms-transform: scale(1.2,1.2);
  transform: scale(1.2,1.2);
}

.hover:hover .caption {
  bottom: 0%;
}

.hover:hover img {
  width: 200%;
}
/*
  Hover scale.
  By NeekGerd.
 */

(function(exports,$){
  var self = this;
  self.CSSvendors = ["-webkit-","-moz-", "-o-", "-ms-","-khtml-",""];

  $("#wrapper .hover").on("mouseenter",function(){
    var $el = $(this),
      $im = $el.children("img"),
      elSize = {w:($el.width()+10)*1.2,h:($el.height()+10)*1.2},
      elPos = $el.offset();

    $(this).on("mousemove",function(evt){
      var mousePos = {x:evt.clientX-elPos.left,y:evt.clientY-elPos.top},
        imSize = {w:$im.width(),h:$im.height()},
        translate = "",
        imPos = {x:$im.position().left,y:$im.position().top},
        css = {},
        newPos = {x:0,y:0};

      newPos.x = - (15 + (mousePos.x/elSize.w)*(imSize.w-elSize.w));
      newPos.y = - (15 + (mousePos.y/elSize.h)*(imSize.h-elSize.h));

      translate = "translate("+newPos.x+"px,"+newPos.y+"px)";
      css = self.prefixCSS(css,"transform",translate);
      $im.css(css);
    });
  }).on("mouseleave",function(){
    $(this).off("mousemove");
    var css = {};
    self.prefixCSS(css,"transform","");
    $(this).children("img").css(css);
  });

  self.prefixCSS = function(obj,prop,value){
    var self = this;
    obj = obj||{};
    for (var i = 0, max = self.CSSvendors.length; i < max; i += 1) {
        obj[self.CSSvendors[i] + "" + prop] = value;
    }
    return obj;
  };


})(window,jQuery);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js