Background Split - css

Question

Is there a way of using the CSS background split technique seen here to split the background in 5 separate locations, and instead on hover make it on a clickable?
Here is an example of what I'm trying to achieve:
JSFIDDLE to use
Here is a live example and some code:
HTML
<div>
Brooklyn Bridge
</div>
CSS
#import url(http://fonts.googleapis.com/css?family=Ovo);
$shimmerDark: #A68B03;
$shimmerLight: #FAD109;
$duration: 100ms;
#function duration($n) {
#return $n * $duration;
}
body {
background-image: url('http://s.cdpn.io/3556/white_wall_hash.png');
}
div {
width: 500px;
height: 332px;
position: relative;
margin: 10% auto 0;
overflow: hidden;
background-color: #fff;
a {
display: block;
font-family: 'Ovo', serif;
word-spacing: 0.15em;
line-height: 332px;
text-align: center;
text-decoration: none;
color: #A68B03;
}
&:before, &:after {
content: "";
display: block;
position: absolute;
background-image: url('http://farm7.staticflickr.com/6118/6358751375_2daa56977a.jpg');
background-repeat: no-repeat;
width: 500px;
height: 166px;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
&:before {
background-position: top;
top: 0px;
}
&:after {
bottom: 0px;
background-position: bottom;
}
&:hover:before {
top: -25%;
}
&:hover:after {
bottom: -25%;
}
}
#-webkit-keyframes shimmer {
from { color: $shimmerDark; }
to { color: $shimmerLight; }
}
.char1,
.char2,
.char3,
.char4,
.char5,
.char6,
.char7,
.char8,
.char10,
.char11,
.char12,
.char13,
.char14,
.char15
{
-webkit-animation-name: shimmer;
animation-name: shimmer;
-webkit-animation-duration: $duration;
animation-duration: $duration;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.char1 {
-webkit-animation-delay: duration(0.5);
animation-delay: duration(0.5);
}
.char2 {
-webkit-animation-delay: duration(1);
animation-delay: duration(1);
}
.char3 {
-webkit-animation-delay: duration(1.5);
animation-delay: duration(1.5);
}
.char4 {
-webkit-animation-delay: duration(2);
animation-delay: duration(2);
}
.char5 {
-webkit-animation-delay: duration(2.5);
animation-delay: duration(2.5);
}
.char6 {
-webkit-animation-delay: duration(3);
animation-delay: duration(3);
}
.char7 {
-webkit-animation-delay: duration(03.5);
animation-delay: duration(3.5);
}
.char8 {
-webkit-animation-delay: duration(4);
animation-delay: duration(5);
}
.char10 {
-webkit-animation-delay: duration(4.5);
animation-delay: duration(4.5);
}
.char11 {
-webkit-animation-delay: duration(5);
animation-delay: duration(5);
}
.char12 {
-webkit-animation-delay: duration(5.5);
animation-delay: duration(5.5);
}
.char13 {
-webkit-animation-delay: duration(6);
animation-delay: duration(6);
}
.char14 {
-webkit-animation-delay: duration(6.5);
animation-delay: duration(6.5);
}
.char15 {
-webkit-animation-delay: duration(7);
animation-delay: duration(7);
}
div:hover .char1,
div:hover .char2,
div:hover .char3,
div:hover .char4,
div:hover .char5,
div:hover .char6,
div:hover .char7,
div:hover .char8,
div:hover .char10,
div:hover .char11,
div:hover .char12,
div:hover .char13,
div:hover .char14,
div:hover .char15
{
-webkit-animation-play-state: running;
animation-play-state: running;
}
JS
$('a').lettering();