Адаптивный блок с картинкой поверх которой текст. Как правильно реализовать?

Question

[freeman0204]

Набросал такой пример codepen.io/freeman0204/pen/MKzRyP При сужении окна текст съезжает относительно фона (картинки). Вроде как нужно взял текст в враппер, и с помощью позиционирования выровнял его поверх картинки, но с адаптацией беда. Как я понимаю при уменьшении окна текст нужно уменьшать в любом случаи? Это можно через медиа сделать, картинка у меня резиновая. А вот как заставить текст двигаться вместе с картинкой?

Answer 1

[Михаил Горячкин]

Можете сделать так:
HTML

<div class="item">
             <img src="http://lorempixel.com/400/300/" alt="">
             <div class="wrap-text">
                <div>
                     <h2>Заголовок второго уровня</h2>
                     <p>Lorem ipsum dolor sit amet, consectetur<br> adipisicing elit. Ipsam, deleniti.</p></div>
                 </div>
         </div>

т.е добавляется еще один div. А css так:

.wrap-text {
  position: absolute;
  width: 100%;
  top: 13px;
  padding: 0 10px;
}
.wrap-text > div {
  padding: 10px;
  background: red;
}
.item {
  position: relative;
  float: left;
  width: calc(33.33333% - 20px);
  margin-right: 20px; 
}

Вот вам и будет адаптивность.