Image + Text in DIV and keep aspect ratio

Question

I have the following requirements:

I need a div with an image + text inside.
The div should keep its aspect ratio and all images inside of the divs should have the same height (to do this, I use: Maintain the aspect ratio of a div with CSS).
The image inside of the div should be stretched in order to completely fill the parent div.

I have two main issues:

As you can see, the left div is higher, because it has text inside. This collides with the padding-bottom: 150%-approach which is used to preserve the aspect ratio of the divs when their size is changed. The goal, however, is that all divs have the same size no matter if/how much text they have inside.
Moreover, I would like to change the opacity of the background image when I hover the div. However, the text-opacity should not change. I think this can only be achieved via JS. How?

score 1 · Accepted Answer · edited Sep 21 '20 at 11:29

Add text as position:absolute

.inner-text{
  position:absolute;
  width:100%;
  height:100%;
  text-align:center;
  z-index:1;
}
.event:hover .inner-text{
  background:rgba(255,255,255,0.5)
}


<div class="bit-3">
  <div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/test.jpg)">
  <div class="inner-text">
      Text inner
  </div>
  </div>
</div>

Update fiddle code: https://jsfiddle.net/f5uxz4mx/8/

.bit-3 {
  width: 33.33333%;
  float: left;
  margin-left: 20px;
}

.event {
    margin: 0 auto;
    position: relative;
    border: 2px solid #000000;
    padding-bottom: 150%;
    background-size: cover;
}

.inner-text{
  position:absolute;
  width:100%;
  height:100%;
  text-align:center;
 z-index:1;

}
.event:hover .inner-text{
 background:rgba(255,255,255,0.5)
}

<div class="bit-3">
  <div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/test.jpg)">
  <div class="inner-text">
      Text inner
  </div>
  </div>
</div>
<div class="bit-3">
  <div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/20170715_mareados.jpg)">
  <div class="inner-text">
      Text inner
  </div>
  </div>
  
</div>

wow great answer. one more thing: can I make the change in opacity via a smooth transition? — beta, Jul 19 '16 at 12:15
I could do it with adding `-webkit-transition: background 1000ms;transition: background 1000ms;` to `.inner-text` — beta, Jul 19 '16 at 12:17

score 0 · Answer 2 · answered Jul 19 '16 at 12:07

try adding background-size: contain;height: 0;

.bit-3 {
  width: 33.33333%;
  float: left;
  max-resolution: res;-left: 20px;
  
  
}

.event {
    margin: 0 auto;
    position: relative;
    border: 2px solid #000000;
    padding-bottom: 150%;
    background-size: cover;
}

<div class="bit-3">
  <div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/test.jpg);background-size: contain;height: 0;">asdf text
  </div>
</div>
<div class="bit-3">
  <div class="event" style="background-image: url(https://container25.at/wpdev/wp-content/uploads/2016/06/20170715_mareados.jpg)">
  </div>
</div>

Image + Text in DIV and keep aspect ratio

2 Answers2