CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user5582011
user5582011

Reputation:

CSS How to have a text caption in the bottom of an image?

I'm very new to css and I am trying to have a text caption in the bottom of my images, like so:

How I want it to look like

I have 3 images in 3 different bootstrap columns.

.img-preview {
  display: block;
  margin: 0 auto;
  object-fit: cover;
  min-height: 300px;
  max-width: 350px;
}
.img-container {
  width: 100%;
  height: auto;
  padding: 0;
  background-position: center top;
}
<div class="row">
  <div class="col-md-10 col-md-offset-1">

    <div class="col-md-4 col-sm-6">
      <img class="img-container img-preview" src="../img/Referenzen_Stimmungsbild.jpg">
      <h3><span>Maler<br />und<br />Tapezierarbeiten</span></h3>
    </div>

    <div class="col-md-4 col-sm-6">
      <img class="img-container img-preview" src="../img/Referenzen_Stimmungsbild.jpg">
    </div>


    <div class="col-md-4 col-sm-6">
      <img class="img-container img-preview" src="../img/Referenzen_Stimmungsbild.jpg">
    </div>
  </div>

I tried a lot of possible solutions but nothing really worked. Tried this for example https://css-tricks.com/text-blocks-over-image/ but when I resized my window, the text caption didn't fit anymore.

What is the best way to achieve this effect?

Upvotes: 5

Views: 16429

Answers (2)

Jishnu V S
Jishnu V S

Reputation: 8409

you can simply do with Position:absolute , try with this answer

.relative_box {
    position:relative;
    width:400px;
    float:left;
}
.relative_box img {
    width:100%;
}
.relative_box h3 {
    position:absolute;
    bottom:0;
    left:0;
    background:#000;
    color:#fff;
    width:100%;
    margin:0;
    padding:10px
}
<div class="relative_box">
    <img src="https://www.wired.com/wp-content/uploads/2015/09/google-logo.jpg" alt="" />
    <h3><span>Maler<br />und<br />Tapezierarbeiten</span></h3>
</div>

Upvotes: 8

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

You can do it using CSS Positioning. But you need to change the structure a little bit. Have a look at the snippet below:

.img-holder {
  min-height: 300px;
  max-width: 350px;
  margin: 0 auto;
  position: relative;
}

.img-holder h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  background: rgba(65, 55, 91, 0.8);
  color: white;
  bottom: 0;
  left: 0;
  width: 80%;
  height: 30%;
  margin: 0;
  padding: 10px;
  text-align: center;
}

.img-preview {
  display: block;
  margin: 0 auto;
  object-fit: cover;
  min-height: 300px;
  max-width: 350px;
}

.img-container{
  width: 100%;
  height: auto;
  padding: 0;
  background-position: center top;
}
<div class="row">
<div class="col-md-10 col-md-offset-1">

    <div class="col-md-4 col-sm-6"> 
      <div class="img-holder">
            <img class="img-container img-preview" src="http://placehold.it/200x200">
            <h3><span>Maler<br />und<br />Tapezierarbeiten</span></h3>
      </div>
    </div>
  
  <div class="col-md-4 col-sm-6"> 
      <div class="img-holder">
            <img class="img-container img-preview" src="http://placehold.it/200x200">
            <h3><span>Maler<br />und</span></h3>
      </div>
    </div>

  </div>

Hope this helps!

Upvotes: 1

Related Questions