I am unable to achieve click effect when hover over image - html

Question

The sample div hovers fine however the background image doesn't move.
The div hovers fine but the image in the background stays at the same position.
What I am trying to achieve is when you hover over the div it moves like it clicks, but the background image in the div doesn't seems to move at all. I want the div and the background to move like real button click.
Fiddle link: http://jsfiddle.net/jackJoe/YhDXm/.
.sample {
width: 220px;
height: 220px;
position: absolute;
overflow: hidden;
margin: 180px;
border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(http://static.adzerk.net/Advertisers/2362.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 188px 188px;
}
.sample > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.sample > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.sample > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25)
}
.sample > header p a {
margin: 0;
color: white;
position: relative;
z-index: 0;
}
.sample:hover {
background-color: #f0eade;
box-shadow: 1px 1px 5px #363024;
-webkit-box-shadow: 1px 1px 5px #363024;
-moz-box-shadow: 1px 1px 5px #363024;
position: relative;
top: 10px;
margin: 180px;
}
<div class="sample">
<header>
<p><a>
Skyscraper
</a>
</p>
</header>
</div>

Answer 1

Your background image stays still because you have background-attachment: fixed; enabled.
From MDN on background-attachment: fixed
This keyword means that the background is fixed with regard to the viewport. Even if an element has a scrolling mechanism, a ‘fixed’ background doesn't move with the element.
Remove your background-attachment statement entirely and change your background-position to 0 0 (or top left) and then you will need to tinker the child elements appropriately.
Fiddle here with adjustments made.
Now that I'm done with that, some supplemental advice:
You should most certainly not do this using top or any other positional properties. These will cause a layout re-calculation on every single hover event (even with position: absolute;) and a paint, at a minimum. If you have a lot of stuff on that page your users may become frustrated or displeased with the stuttering on the page.
Instead, use transform: translate(X, Y); for a very cheap and equally effective move. Here is the fiddle with this incorporated

Answer 2

I found the answer for my question, thanks everyone for the help,
This is fiddle linke: http://jsfiddle.net/YhDXm/1186/
.sample {
width: 220px;
height: 220px;
position: absolute;
overflow: hidden;
margin: 180px;
border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
background: url(http://static.adzerk.net/Advertisers/2362.jpg);
background-repeat: no-repeat;
background-position: 0 0;
}
.sample > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.sample > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 100%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.sample > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25)
}
.sample > header p a {
margin: 0;
color: white;
position: relative;
z-index: 0;
}
.sample:hover {
box-shadow: 1px 1px 5px #363024;
-webkit-box-shadow: 1px 1px 5px #363024;
-moz-box-shadow: 1px 1px 5px #363024;
position: relative;
top: 10px;
margin: 180px;
}
<div class="sample">
<header>
<p><a>
Skyscraper
</a>
</p>
</header>
</div>