<div class="gallery">
<a href="https://assets.codepen.io/3/mz1.jpg">
<img src="https://assets.codepen.io/3/mz1_m.jpg" alt="" />
</a>
<a href="https://assets.codepen.io/3/mz2.jpg">
<img src="https://assets.codepen.io/3/mz2_m.jpg" alt="" />
</a>
<a href="https://assets.codepen.io/3/mz3.jpg">
<img src="https://assets.codepen.io/3/mz3_m.jpg" alt="" />
</a>
<a href="https://assets.codepen.io/3/mz4.jpg">
<img src="https://assets.codepen.io/3/mz4_m.jpg" alt="" />
</a>
<a href="https://assets.codepen.io/3/mz5.jpg">
<img src="https://assets.codepen.io/3/mz5_m.jpg" alt="" />
</a>
<a href="https://assets.codepen.io/3/mz6.jpg">
<img src="https://assets.codepen.io/3/mz6_m.jpg" alt="" />
</a>
</div>
* {
margin: 0;
padding: 0;
}
body {
font: 14px Georgia, serif;
}
#page-wrap {
width: 760px;
margin: 0 auto;
}
h1 {
text-align: center;
margin: 20px 0;
font: 30px Georgia, Serif;
}
a img {
border: 0;
}
.gallery a {
width: 240px;
height: 180px;
display: block;
float: left;
margin: 0 20px 20px 0;
}
.gallery a:nth-child(3n) {
margin-right: 0;
}
.gallery a img {
-webkit-box-shadow: 0 0 10px #999;
-moz-box-shadow: 0 0 10px #999;
}
.gallery a img:hover {
-webkit-box-shadow: 0 0 10px #222;
-moz-box-shadow: 0 0 10px #222;
}
.larger {
position: absolute !important;
z-index: 10001;
-webkit-box-shadow: 0 0 35px #222;
-moz-box-shadow: 0 0 35px #222;
}
View Compiled
$(function () {
var $el;
$(".gallery a").live("click", function () {
$el = $(this);
$("<img />", {
src: $el.attr("href"),
class: "larger"
}).load(function () {
$(this)
.appendTo("body")
.width($el.find("img").width())
.position({
of: $el.find("img"),
my: "center center",
at: "center center"
})
.animate(
{
width: 500
},
{
duration: 1000,
easing: "easeOutQuad",
step: function (i) {
$(this).position({
of: $el.find("img"),
my: "center center",
at: "center center",
collision: "fit"
});
}
}
);
});
return false;
});
$(".larger").live("click", function () {
$el = $(this);
$el.fadeOut(400, function () {
$el.remove();
});
});
});
This Pen doesn't use any external CSS resources.