Gallery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
<script>
$(window).load(function() {
$('#gallery img').each(function() {
createCanvas(this);
});
function createCanvas(image) {
var canvas = document.createElement('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
pixelData = imageData.data;
for (var y = 0; y < canvas.height; y++) {
for (var x = 0; x < canvas.width; x++) {
var i = (y * 4 * canvas.width) + (x * 4);
var red = pixelData[i];
var green = pixelData[i + 1];
var blue = pixelData[i + 2];
var grayScale = (red * 0.3) + (green * 0.59) + (blue * .11);
pixelData[i] = grayScale;
pixelData[i + 1] = grayScale;
pixelData[i + 2] = grayScale;
}
}
ctx.putImageData(imageData, 0, 0, 0, 0, imageData.width, imageData.height);
image.parentNode.insertBefore(canvas, image);
}
}
});
</script>
<style>
html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, img, ol, ul, li
{margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
body {line-height: 1;}
ol, ul {list-style: none;}
:focus {outline: 0;}
a {text-decoration:none;}
body {background: #f6f6f6 url(images/bckgtexture.jpg);font-family:'Open Sans Condensed', Arial;padding-top:40px;color:#393939;}
#wrap {width: 1020px; margin: 0 auto;}
h1 {font-size:3em;margin-left:20px;margin-bottom:20px; text-shadow:0 1px 0 #fff;}
li {float:left; position:relative; display:inline-block; width:300px; height:300px;margin:10px; padding:10px; background:#fff; -webkit-box-shadow:0 0 5px rgba(0,0,0,.35);
-moz-boz-shadow: 0 0 5px rgba(0,0,0,.35);box-shadow:0 0 5px rgba(0,0,0,.35);}
li div {position:absolute;height:0; width:280px;background:rgba(0,0,0,.45); overflow:hidden;bottom:10px;left:10px; padding: 0 10px;-webkit-transition:height 1s;-moz-transition:height 1s;-o-transition:height 1s;-ms-transition:height 1s; transition:height 1s;color:#fff;line-height:50px;font-size:1.2em;}
li:hover div {height:50px;}
canvas {opacity:1; position:absolute; top:10px; left:10px; -webkit-transition:opacity 1s .2s;-moz-transition:opacity 1s .2s;-o-transition:opacity 1s .2s;-ms-transition:opacity 1s .2s;transition:opacity 1s .2s;}
li:hover canvas {opacity:0;}
p {clear:left; float:right; margin-top:10px;margin-right:20px;}
p a {color:#909090;-webkit-transition:color .6s;-moz-transition:color .6s;-o-transition:color .6s;-ms-transition:color .6s;transition:color .6s;}
p a:hover {color:#eb5cf4;}
</style>
</head>
<body>
<div id="wrap">
<h1>Gallery</h1>
<ul id="gallery">
<li><a href="http://pinkonhead.com/freebies/photos/spring-is-coming-10-free-photos/" target="_blank"><img src="images/flo1.jpg"><div>text 1</div></a></li>
<li><a href="http://pinkonhead.com/freebies/photos/night-photo-driving-17-free-photos/" target="_blank"><img src="images/lights2.jpg"><div>text 2</div></a></li>
<li><a href="http://pinkonhead.com/freebies/photos/spring-is-coming-10-free-photos/" target="_blank"><img src="images/flo3.jpg"><div>text 3</div></a></li>
<li><a href="http://pinkonhead.com/freebies/photos/night-photo-driving-17-free-photos/" target="_blank"><img src="images/lights1.jpg"><div>text 4</div></a></li>
<li><a href="http://pinkonhead.com/freebies/photos/spring-is-coming-10-free-photos/" target="_blank"><img src="images/flo2.jpg"><div>text 5</div></a></li>
<li><a href="http://pinkonhead./freebies/photos/night-photo-driving-17-free-photos/" target="_blank"><img src="images/lights3.jpg"><div>text 6</div></a></li>
</ul>
</div>
</body>
</html>