Pat S Pat S - 4 years ago 190
HTML Question

Trying to get text to overlap circular image to behave upon resizing with bootstrap

I have a page where I'd like to have a row of circular images with text on them that can serve as links. I've figured out how to get this to work for the general case of a full sized webpage, but when I resize the width of the page, the text doesn't scale with the image because I have to use absolute positions. Here's the html:

<!DOCTYPE html>
<html>

<head>

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="main.css">
</head>


<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>

<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>

<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>

<div class="col-md-3">
<a class= href="">
<img src="http://placehold.it/500x500" class="align-center img-responsive img-circle button-pic" />
<div class="button-caption">Button</div>
</a>
</div>
</div>

</div>

</body>

</html>


Here's the main.css page...

body {
max-width: 900px;
margin: 0 auto;
}

.container {
width: 100%;
}

.button-pic {
opacity: 0.4;
position: relative;
}

.button-caption {
text-align: center;
position: absolute;
top: 87px;
left: 85px;
}


I'd like to find a way to not have to set the top and left positions of the button-caption since not all of my labels will be the same length. Anyone have advice to offer?

Answer Source

If you want your text position to remain consistent to the image you'll need to use percentages instead of setting a fixed amount of pixels for the position since the images are responsive.

See working Snippet.

.content {
  max-width: 900px;
  margin: auto;
}
.button-pic {
  opacity: 0.4;
  position: relative;
  margin: auto;
}
.button-caption {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">

  <div class="container-fluid">

    <div class="row">
      <div class="col-md-3">
        <a href="#">
          <img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
          <span class="button-caption">Just a Button</span>
        </a>
      </div>

      <div class="col-md-3">
        <a href="#">
          <img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
          <span class="button-caption">Button</span>
        </a>
      </div>

      <div class="col-md-3">
        <a href="#">
          <img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
          <span class="button-caption">Just a Really Very Pretty Long Label for a Button</span>
        </a>
      </div>

      <div class="col-md-3">
        <a href="#">
          <img src="http://placehold.it/500x500" class="img-responsive img-circle button-pic" />
          <span class="button-caption">A Button</span>
        </a>
      </div>
    </div>

  </div>

</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download