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>

Here is what i got responsive version without text and layout on top of image:

* {
  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;


}
div > div {

  margin: 0.5rem;
  float:left;
}
div:nth-child( 4n ){
  clear: left;
}
img{
  width: 256px;
    max-height: 100%;
}

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

@media( max-width: 1024px ){
  div:nth-child( 2n + 3 ){
    clear: left;
  }
  div:nth-child( 4n ){
    clear: none;
  }
  .note {
    background-color: rgba( 0, 0, 0, 0.6 );
  }
}

<div class="note">Resize viewport to change layout</div>
<div class="wrapper">
  <div><img src="http://i.imgur.com/VCsr2MH.png" alt=""/></div>
  <div><img src="http://i.imgur.com/VCsr2MH.png" alt=""/></div>
  <div><img src="http://i.imgur.com/VCsr2MH.png" alt=""/></div>
  <div><img src="http://i.imgur.com/VCsr2MH.png" alt=""/></div>
  <div><img src="http://i.imgur.com/VCsr2MH.png" alt=""/></div>
  <div><img src="http://i.imgur.com/VCsr2MH.png" alt=""/></div>
</div>

Additionally there is some problem with resizing images (size) when they are not a divider of number 1024 in responsive snippet.

responsive grid: https://stackoverflow.com/questions/44205397/how-to-put-images-into-a-grid-with-css#44205894 — sheriffderek, Aug 02 '17 at 00:44
elements on top of elements: https://stackoverflow.com/questions/44208665/position-text-over-image-on-hover-using-html-css#44208827 — sheriffderek, Aug 02 '17 at 00:45

basement · Accepted Answer · 2017-08-02T06:37:55.753

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>

I really need change in @media( max-width: 1024px ) It goes to 2 row view when on 1024 when it is supposed to 2 divs per row below 1024px. Here is what i got: http://www.cssdesk.com/7kW7k — AESTHETICS, Aug 02 '17 at 10:22
Below 1024px it is 2 divs per row. Look at this screenshot I took: http://i.imgur.com/Q4MoCoU.png. Theres 3 rows and 2 divs on each row. Is this not correct? — basement, Aug 02 '17 at 15:33
Yes, below but not when it is 1024px. I have it working now. Here is the link: https://jsfiddle.net/0nocysm9/ — AESTHETICS, Aug 02 '17 at 15:38

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

1 Answers1

Linked