css - How to place text on top of image within div with layout transparent layout?

Question

I am trying to place text within image like in the snipped below but using divs, scalable layout for text and resizable text.

Like this:

h3 {
     word-break: break-word; /* non standard for webkit */ 
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}
.img{
 width:640px;
 height:100%;
}
.image { 

   position: relative; 
   width: auto; /* for IE 6 */
   max-height: 640px;
}

h2{
   background-color: rgba(0, 0, 0, 0.5);
   padding-left: 20px;
   padding-right: 20px;
   padding-bottom: 10px;
    padding-top: 10px;
   position: absolute; 
   bottom:-15px;
   left: 0; 
   width: 600px; 
   color:white;
}

<div class="image">
      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />    
      <h2 lang="en">A Movie in the Park: Kung Fu Panda</h2>
</div>
<div class="image">
      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />     
      <h2 lang="en">A Movie in the Park: Kung Fu Panda saasffdafadfadfda</h2>
</div>
<div class="image">
      <img src="http://i.imgur.com/VCsr2MH.png" alt="" class="img" />      
      <h2 lang="en">Incomprehensibilities ffafefeafea fefeefes gregrgregregerge</h2>
</div>

Answer 1

If all you want is a responsive layout with text over the images you could simply add the text in an absolutely positioned div inside the element. Notice how the div text is inside their respective elements and on top of the images.

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
html {
  font-family: sans-serif;
}
body {
  display: flex;
  align-items: center;
}
.wrapper {
  overflow: hidden;
  margin: auto;
  background-color: #c06;
}
div > div {
  width: 9rem;
  margin: 0 0.125rem;
  background-color: #c06;
  float:left;
  position: relative;
}
div:nth-child( 4n ){
  clear: left;
}

.note {
  width: 100%;
  padding: 1rem;
  background-color: #000;
  color: #eee;
  text-align: center;
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
}

img {
  max-width: 100%;
}
div div:nth-child( 1 ) img{
  filter: grayscale( 100% );
}
div div:nth-child( 3 ) img{
  filter: brightness( 150% );
}
div div:nth-child( 4 ) img{
  filter: hue-rotate( 205deg );
}
div div:nth-child( 5 ) img{
  filter: saturate( 250% );
}
div div:nth-child( 6 ) img{
  filter: invert( 100% );
}
.txt {
  background-color: transparent;
  color: #eee;
  position: absolute;
  top: 50%;
  transform: translateY( -50% );
  text-align: center;
  font-size: 2rem;
  text-shadow: 0 0 0.5rem #000;
}
@media( max-width: 1025px ){
  div:nth-child( 2n + 3 ){
    clear: left;
  }
  div:nth-child( 4n ){
    clear: none;
  }
  .note {
    background-color: rgba( 0, 0, 0, 0.8 );
  }
}

<div class="note">Resize viewport to change layout</div>

<div class="wrapper">
  <div>
    <img src="http://i.imgur.com/iyzGnF9.jpg">
    <div class="txt">div text 1</div>
  </div> 
  <div>
    <img src="http://i.imgur.com/iyzGnF9.jpg">
    <div class="txt">div text 2</div>
  </div> 
  <div>
    <img src="http://i.imgur.com/iyzGnF9.jpg">
    <div class="txt">div text 3</div>
  </div> 
  <div>
    <img src="http://i.imgur.com/iyzGnF9.jpg">
    <div class="txt">div text 4</div>
  </div> 
  <div>
    <img src="http://i.imgur.com/iyzGnF9.jpg">
    <div class="txt">div text 5</div>
  </div> 
  <div>
    <img src="http://i.imgur.com/iyzGnF9.jpg">
    <div class="txt">div text 6</div>
  </div> 
</div>