Text Overlay with Doubt Bootstrap

Asked

Viewed 475 times

5

I’m trying to make a text overlay on an image with bootstrap, but I’m not getting it.

Someone would know how to do and help me?

My code is:

<section class="container">
  <div class="row ptf">
   	<div class="col-sm-4">
    	<img src="imagens/evidence.png" class="img-responsive" />
    </div>
    <div class="col-sm-4">
    	<img src="imagens/evidence.png" class="img-responsive" />
    </div>
    <div class="col-sm-4">
    	<img src="imagens/evidence.png" class="img-responsive" />
    </div>
  </div>
</section>

jquery twitter-bootstrap

1 answer

1

You can do it like this:

.image {
  position: relative;
  width: 100%;
}
h2 {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
}
h2 span {
  color: white;
  font: bold 24px/45px Helvetica, Sans-Serif;
  letter-spacing: -1px;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
}
<div class="image">
  <img src="http://lorempixel.com/image_output/people-q-g-640-480-10.jpg" alt="" />
  <h2>
    <span>Vamos Ajudar!<span class='spacer'></span><br />
    <span class='spacer'></span>doe alimentos e não cachaça!</span>
  </h2>
</div>

Browser other questions tagged jquery twitter-bootstrap

You are not signed in. Login or sign up in order to post.