Reduce clickable area for an image

Question

I've created a left navigation bar using buttons. I'm trying to reduce the hyperlink area to just the background image. Also, another issue I'm having is the elements overlaying the background image are taking precedence over the hyperlink, so the button is not actually clickable. Page for reference http://www.auburn.edu/administration/facilities/home-page/index.html

Hyperlink area

Here's the background image area

.img-responsive {
    display: block;
    padding: 0;
    margin: 0;
}
.background:hover .head {
    color: #d76e08;
}
.overlay {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    color: white;
}
.icon {
    padding-top: 15px;
    padding-left: 40px;
}
.head {
    margin-top: -75px;
    padding-left: 120px;
}
.content {
    margin-top: -5px;
    padding-left: 120px;
    padding-right: 35px;
}



<div class="row">
    <div class="col-sm-12">
        <div class="background">
            <a href="../Collin/misc/issues/index.html">
                <img alt="background" class="img-responsive" src="buttons/images/button.png" />
            </a>
            <div class="overlay">
                <div class="icon">
                    <img alt="test" class="img-responsive" src="buttons/images/info-icon.png" />
                </div>
                <p class="head">Ask Facilities</p>
                <p class="content">Here will be text about the button. .</p>
            </div>
        </div>
    </div>
</div>

Answer 1

I'm trying to reduce the hyperlink area to just the background image.

Your markup is incredibly complex for what you are displaying.

You could have something like:

<ul>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>

<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
</ul>

and add the image and the gradient using CSS.

Answer 2

I would use a single link tag for your button and leverage CSS gradients for the background:

 * { box-sizing: border-box; } body { font-family: sans-serif; } .button { background-image: linear-gradient(to bottom, #3D85C6, #07355F 50%, #07355F); background-size: 100% 200%; border-radius: 4px; color: #fff; display: block; padding: 10px; text-decoration: none; transition: all 150ms ease-in-out; } .button:hover, .button:focus, .button:active { background-position: 0 50%; } .button-icon { float: left; margin-right: 15px; } .button-content { overflow: hidden; } .button-title { font-size: 18px; font-weight: bold; } .button-description { font-size: 16px; } 

 <a class="button" href="../Collin/misc/issues/index.html"> <div class="button-icon"> <img src="http://satyr.io/72/white?brand=github" alt=""/> </div> <div class="button-content"> <p class="button-title">Ask Facilities</p> <p class="button-description">Here will be text about the button…</p> </div> </a> 

Also here http://jsbin.com/rikisemawe/edit?html,css,output

Answer 3

The elements in OP were stacked in the markup, there were no nested components of the button. That would explain the unusual position coords and large padding. Instead of <img> , background-image is used. Changed some of the tags to a real <button> , <h4> instead of <p> , etc.

SNIPPET

 .button { position: relative; min-width: 350px; max-width: 100%; min-height: 95px; height: auto; padding: 5px 10px; border: 0 none transparent; border-radius: 6px; background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/button.png)no-repeat; background-size: cover; } .background:hover .head { color: #d76e08; } .text { padding: 0 5px; position: absolute; left: 85px; top: 5px; text-align: left; color: #def; text-decoration: none; } .button:hover, .text:hover { text-decoration: none; color: #def; } .button:hover .head { color: gold; } .icon { width: 75px; height: 75px; position: absolute; top: calc(50% - 37.5px); background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/service-icon.png)no-repeat; } 

 <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="row"> <div class="col-sm-12"> <button class="button"> <div class="icon"></div> <a class='text'> <h4 class="head">Ask Facilities</h4> <p class="content">Here will be text about the button.</p> </a> </button> </div> </div>