Decrease the interactive area for an image

Question

Decrease the interactive area for an image

I have successfully designed a left navigation bar using buttons. Currently, I am facing two main issues that I need assistance with. Firstly, I am trying to limit the hyperlink area to just the background image. Secondly, the elements that are overlaying the background image are covering the hyperlink, making the button unclickable. For reference, you can view the page here:

Let's focus on the hyperlink area:

https://i.sstatic.net/NwqkW.png

Now, let's examine the background image area:

https://i.sstatic.net/6H4qQ.png

.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>

html css twitter-bootstrap

Answer 1

Answer №1

I'm looking to minimize the clickable area to just the background image.

Your coding seems overly complicated for the content you want to display.

You might consider something like this:

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

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

Then, use CSS to insert the image and gradient.

Answer 2

I'm looking to minimize the clickable area to just the background image.

Your coding seems overly complicated for the content you want to display.

You might consider something like this:

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

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

Then, use CSS to insert the image and gradient.

Answer 3

Answer №2

To create a stylish button, utilize a single link tag and incorporate 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>

For a live example, visit http://jsbin.com/rikisemawe/edit?html,css,output

Answer 4

To create a stylish button, utilize a single link tag and incorporate 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>

For a live example, visit http://jsbin.com/rikisemawe/edit?html,css,output

Answer 5

Answer №3

The markup for the elements in OP was not nested, resulting in the unusual position coordinates and large padding. To improve this, some tags like <button> and <h4> were used instead of <p>, and <img> was replaced with background-image.

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>

Answer 6

The markup for the elements in OP was not nested, resulting in the unusual position coordinates and large padding. To improve this, some tags like <button> and <h4> were used instead of <p>, and <img> was replaced with background-image.

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>

Decrease the interactive area for an image

Answer №1

Answer №2

Answer №3

SNIPPET

Similar questions

Achieving Vertical Alignment in a Bootstrap 4 Image Overlay Card

What methods can be used to control the URL and back button in a web application designed similar to an inbox in Gmail?

Issues arise when trying to use the Jquery append() method in conjunction with Angular

Leverage Bootstrap 4 for achieving flexible layouts and centering content with two elements using flex and justify-content

Closing a bootbox alert by clicking on a href link

What is the process for adding color to the rows of a table?

The webpage appears fine on the local server, but displays incorrectly on IIS (Internet Explorer 11)

What is the best approach to determine the value of a textbox in an array for each row of

Retrieve data from an external website containing an HTML table without a table ID using Java Script and transform it into JSON

Conceal and reveal elements using a specific identifier with

Mastering jQuery UI: A beginner's guide to utilizing the date picker widget

Improved efficiency in CSS for left transition animations

Is it possible to leverage the flex features of react-native in a manner similar to the row/column system of

Using javascript to color in cells of a grid of "pixels"

After being reloaded multiple times, the time and date mysteriously vanish

Issue with fancyBox not functioning properly when integrated with a caption script

Increase the font size of a div using CSS to make it appear larger

Set the input's type attribute to 'checkbox' to address an issue with Internet Explorer

What could be causing the issue of this JQuery dropdown plugin not functioning properly on multiple dropdowns?

Tips for creating a stylish scrollbar in a React Material-Table interface