How do I dispose of the title over the - bootstrap image?

Asked

Viewed 1,588 times

1

How do I place the title on top of the image with bootstrap? inserir a descrição da imagem aqui

       <div class="row">
           <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe ">
              <a data-toggle="modal" data-target="#exampleModal" href="#" ><img src="https://www.bigstockphoto.com/images/homepage/2016_popular_photo_categories.jpg" class="img-responsive"></a>
           </div>

CSS:

.gallery-title
{
    font-size: 36px;
    color: #42B32F;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}
.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #5e5e5e;
}
.filter-button
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #42B32F;
    margin-bottom: 30px;

}
.filter-button:hover
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #42B32F;

}
.filter-button.active
{
    background-color: #42B32F;
    color: white;
}
.port-image
{
    width: 100%;
}

.gallery_product
{
    margin-bottom: 30px;
}

php css bootstrap
  • 1

    Hello I found a possible consultation solution this link.

1 answer

1


You can position the text with position:relative, example:

.gallery_product
{
    margin-bottom: 30px;
}
.gallery_product .title{
  color:#fff;
  margin: 0;
  position:relative;
  bottom:50px;
  left:10px;
}
.gallery_product .title small{
  display:block;
}
<div class="row">
     <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe ">
        <a data-toggle="modal" data-target="#exampleModal" href="#" ><img src="https://www.bigstockphoto.com/images/homepage/2016_popular_photo_categories.jpg" class="img-responsive"></a>
        <h4 class="title">Título <small>Sub título</small></h4>
     </div>
</div>

Browser other questions tagged php css bootstrap

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