How To Make A Div Linkable?

I have a block on my Shopify theme's home page that is basically an image box with text over it and when the text is clicked, it links to a url.

I want the box itself to be linkable in case I don't use any text. This is the code below that makes the text a link. How can I make the entire box the link?

  `<div class="text-center col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="img1">
        <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{ settings.home_blockhtml_link_1 }}">             
          {{ 'home_html_1.png' | asset_url | img_tag:    settings.home_blockhtml_tilte_1, "img-responsive" }}                               
          <div class="description">
            <p class="title">{{ settings.home_blockhtml_tilte_1 }}</p>
            <p class="text">{{ settings.home_blockhtml_des_1 }}</p>         
            <p class="button hidden-md hidden-sm hidden-xs"><a class="btn btn-outline-small" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{ settings.home_blockhtml_link_1 }}" title="{{ settings.home_blockhtml_buttontxt_1 }}">{{ settings.home_blockhtml_buttontxt_1 }}</a></p>
          </div>    
        </a>        
    </div>  
</div>

`

Position the div inside your <a> tags, like so, giving the a tag their own class. This will need CSS styling like so:

.className {
    display:block;
{

Now, the <a> tag inside the <div> will cause you issues, so you'll need to change this to element, the example below changes it to a <span>.

<a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{ settings.home_blockhtml_link_1 }}" class="className">
<div class="text-center col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="img1">


      {{ 'home_html_1.png' | asset_url | img_tag:    settings.home_blockhtml_tilte_1, "img-responsive" }}

      <div class="description">
        <p class="title">{{ settings.home_blockhtml_tilte_1 }}</p>
        <p class="text">{{ settings.home_blockhtml_des_1 }}</p>

        <p class="button hidden-md hidden-sm hidden-xs"><span class="btn btn-outline-small" title="{{ settings.home_blockhtml_buttontxt_1 }}">{{ settings.home_blockhtml_buttontxt_1 }}</span></p>
      </div>

    </div>

</div>

</a>

See: https://jsfiddle.net/88fx4p3x/