href links not working when nested in data section - html

Question

So I'm designing a site that utilizes parallax scrolling and the HTML5 data attribute. The problem is that nested in one of the data sections (data-slide), I have a link, and it doesn't seem to work unless I place it outside of the data-slide.
url: http://ericbrockmanwebsites.com/dev3/ (at the bottom of the page, in "projects")
Here's the markup:
<div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0">
<div class="container clearfix">
<div class="row">
<div class="span10 offset1">
<div class="row">
<div class="span3">
<div class="slideno">
Projects
</div> <!-- slideno -->
</div> <!-- span3 -->
<div class="span7">
<div class="gridContainer">
<?php $the_query = new WP_Query( array(
'post_type' => 'page',
'post_parent' => 0,
'orderby' => 'date',
'order' => 'DESC',
'posts_per_page' => 999)); // how many posts to show
x = 0;
while ( $the_query->have_posts() ) :
$the_query->the_post(); ?>
<div class="view view-tenth">
<?php the_post_thumbnail('grid-image'); ?>
<div class="mask">
<h2><?php the_title(); ?></h2>
<p></p>
Explore
</div> <!-- mask -->
</div> <!-- view view-tenth -->
<?php $x++; ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</div> <!-- gridContainer -->
</div> <!-- span7 -->
</div> <!-- row -->
</div> <!-- span10 offset1 -->
</div> <!-- row -->
</div> <!-- container clearfix -->
</div><!-- Slide 4 -->
Any advice on what I am doing wrong or how to get around this?
Thanks, as always!

Answer 1

Did you try this one?
input type="button" name="Release" onclick="document.write('<?php the_permalink() ?>');" value="Explore"
Its a different approach of the href.