vedant1811 vedant1811 - 4 months ago 8
HTML Question

Align text to bottom in a button and in front of background

How can I align the text in the button to the bottom?

I tried to set

line-height
and
vertical-align: bottom;
in my CSS but neither worked.

UPDATE:

Also, I want the text to be in front of the background. I have set back gradients in the
normal
,
hover
and
active
states, so I my white text to be in front of that.

Code:



.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
color: white;
}

.img-panel:after {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
}

.img-panel:hover:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(40%, rgba(0, 0, 0, 0.3)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
}

.img-panel:active:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(40%, rgba(0, 0, 0, 0.6)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
<div class="col-md-4 img-panel-container">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
Hello
</button>
</div>
</div>





For some reason bootstrap is not working in the code snippet

tzi tzi
Answer

You can create a child element in your button (here a span) that you position to the bottom of the button.

Because the button is position: relative, the span with position: absolute will be position according to the button.

We also create a child element to display the background, via the ::before pseudo-element selector. To resolve which child will be display on top, between two position: absolute elements, the browser use the HTML/DOM order. So a ::before element will be displayed below the others, while a ::after will be displayed on top. You also can force the stacking order with the z-index property.

.img-panel {
  position: relative;
  height: 300px;
  width: 100%;
  background-size: cover;
}

.img-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, transparent 40%, black 100%);
}
.img-panel:hover::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 40%, black 100%);
}

.img-panel > span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  text-align: center;
  color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
  <span>Hello</span>
</button>

Comments