Image block with clickable overlay link (like the squarespace templates page)

First off, I'm using the Montauk template.

Basically, this is what I want: http://squarespace.com/templates. Notice how when you roll over an image it gets darker (presumably with an overlay?) and has text and operates like a click through link?

Right now, what I have is this: http://davidkillebrew.net/music. I've done a little bit of searching and found some code to tweak to get to the point I'm at but it's not exactly what I want. I'd like my images to operate basically exactly like the ones on the squarespace templates page.

I know this is probably not very difficult since it's literally on one of the main squarespace pages but I'm not very CSS savvy and I've not been able to find any answers on this site to my problem.

I figured it out on my own! Below is the coding I used. It's kind of a mess and I'm not sure which coding got the job done but, with some number tweaking, that's how I did it.

I can't believe I didn't notice you could make the image caption text into a link on the editor page. The coding at the very bottom pertains to making the image caption text padding span the entire height of your image. However, this doesn't make the areas to the left and right of the text link so what I did was add an equal amount of spaces to the beginning and ending of my text. That kept the text centered and made the entire area of the image into a clickthrough link.

.extra-wrapper.page-header .sqs-layout .sqs-row:first-child [class*="sqs-col"] .sqs-block:first-child, .extra-wrapper.page-header .sqs-layout.editing {
margin-top: 50px;
}
.sqs-layout:not(.sqs-editing) .sqs-row .sqs-block:not(.float):first-child {
padding-top: 0;
}
[class*=sqs-col] .sqs-block {
padding-left: 17px;
padding-right: 17px;
}
.sqs-block {
position: relative;
clear: both;
height: auto;
outline: 1px solid transparent;
-webkit-transition: outline .1s ease-in-out;
-moz-transition: outline .1s ease-in-out;
-o-transition: outline .1s ease-in-out;
transition: outline .1s ease-in-out;
padding-top: 17px;
padding-bottom: 17px;
}
user agent stylesheetdiv {
display: block;
}



.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper {
top: 0px;
background: none repeat scroll 0% 0%;
background: #121219;
background: -moz-linear-gradient(-45deg, #121219 0%, #140e14 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #121219), color-stop(100%, #140e14));
background: -webkit-linear-gradient(-45deg, #121219 0%, #140e14 100%);
background: -o-linear-gradient(-45deg, #121219 0%, #140e14 100%);
background: -ms-linear-gradient(-45deg, #121219 0%, #140e14 100%);
background: linear-gradient(135deg, #121219 0%, #140e14 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#121219', endColorstr='#140e14', GradientType=1);
filter: alpha(opacity=100);
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper {
position: absolute;
overflow: hidden;
top: auto;
bottom: 0;
left: 0;
right: 0;
padding: 189px;
background: rgba(0, 0, 0, .7);
}
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption-wrapper {
opacity: 0;
-webkit-transition: opacity .1s ease-out;
-moz-transition: opacity .1s ease-out;
-o-transition: opacity .1s ease-out;
transition: opacity .1s ease-out;
}



.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption {
-webkit-transition: margin-bottom .1s ease-out;
-moz-transition: margin-bottom .1s ease-out;
-o-transition: margin-bottom .1s ease-out;
transition: margin-bottom .1s ease-out;
margin-bottom: -5px;
}



.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper p:last-child, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper p:last-child {
padding-bottom: 0;
margin-bottom: 0;
}
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper p:first-child, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper p:first-child {
padding-top: 0;
margin-top: 0;
}
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper p {
font-size: 40px;
text-transform: uppercase;
position: absolute;
top: 43%;
left: 50%;
margin-left: -50%;
width: 100%;
text-align: center !important;
}
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper p, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper p {
color: #bbb;
line-height: 1.68em;
}
.sqs-block-image .image-caption p {
font-size: 12px;
line-height: 1.68em;
}



.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper p a {
text-decoration: none !important;
font-weight: bold;
color: #eee !important;
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper p a, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper p a {
color: #bbb;
text-decoration: underline;
}
.sqs-block-image .image-caption p a {
display: inline;
}

.image-caption a {
padding-top: 500px;
padding-bottom: 500px;
}