Make a clickable, animated hover using css only

Question

The point is making an aside element enter when you hover on an image, using only CSS, but also, let its children accept click events.

So far what I have is a functioning animated hover, which has a button in it and that button does act on click events. I have used pointer-events: none on the sliding aside element, because otherwise the animation is jumpy to the point of breaking, So, pointer-events: none gets that out of the way and the animation is smooth and persistent as long as you're hovering.

The problem occurs when you hover on the button. It will make the aside transition out (see the fiddle, it's better than my broken English).

I'm looking for a way to prevent the aside from returning to its initial, hidden position. And the challenge of course, is using CSS only!

Here is the code (it's also in the fiddle):

HTML:

<div class="thumbnail">
  <img src="http://i59.tinypic.com/10cvw8y.jpg" class="template-img">
  <aside tab-index="1" class="hover">
    <button class="button" onclick="alert('wow')">CLICK ME</button>
  </aside>
</div>

CSS:

.thumbnail {
  position: relative;
  overflow: hidden;
}

.template-img {
  width: 100%;
  height: 100%;
}

.template-img:hover ~ .hover {
  transform: translateX(0);
}

.template-img:focus {
  pointer-events: none;
}

.template-img:focus ~ .hover {
  transform: translateX(0);
  transition: none;
}

.hover {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding-top: 15%;
  transform: translateX(-100%);
  transition: transform .4s ease-out;
  pointer-events: none;
  background: rgba(255, 0, 0, 0.4);
  z-index: 10;
}

.button {
    pointer-events: auto;
}

Answer 1

Adding the style below seems to fixed the problem

.hover:hover {
 transform: translateX(0);
}

Forcing the animation to run when hovering the content as well

Here's a fiddle