Отзывчивый наложенное изображение в другое изображение

Question

Я успешно отображается изображение поверх другого изображения, как это:

<div class="row"> 
    <div class="col-lg-6 col-md-6 col-sm-12"> 
     <div class="image-with-overlay"> 
      <div class="shop-now-overlay"> 
       <img src="img/btn_shop_now.png"> 
      </div> 
      <img src="img/left_image.jpg"/> 
     </div> 
    </div> 
    <div class="col-lg-6 col-md-6 col-sm-12"> 
     <div class="image-with-overlay"> 
      <div class="shop-now-overlay"> 
       <img src="img/btn_shop_now.png"> 
      </div> 
      <img src="img/right_image.jpg"/> 
     </div> 
    </div> 
</div> 

И это, как моя таблица стилей выглядит следующим образом:

.image-with-overlay { 
    position: relative; 
} 
.image-with-overlay .shop-now-overlay { 
    position: absolute; 
    z-index: 10; 
    bottom: 0; 
    right: 0; 
    padding-bottom: 30px; 
    padding-right: 30px; 
} 

Но я хочу мою страницу быть отзывчивыми и, конечно же, каждый раз, когда я изменяю размер моего браузера меньше, и изображения отображаются в одном столбце (col-sm-12), кнопка наложения отображается за пределами изображения и занимает ширину страницы. Любые идеи о том, как ограничить наложение изображений только обтеканием изображения, даже когда экран меньше?

Answer 1

Похоже, что responsive.css делает его статическим! Вы можете попробовать с !important? Я не буду рекомендовать это, но проверка не повредит.

.image-with-overlay { 
    position: relative !important; 

    .shop-now-overlay { 
     position: absolute !important; 
     z-index: 10; 
     bottom: 0; 
     right: 0; 
     padding-bottom: 30px; 
     padding-right: 30px; 
    } 
} 

Answer 2

Попробуйте удалить padding элемент и попытаться обработать позицию left и right : 30px

.shop-now-overlay { 
     position: absolute; 
     z-index: 10; 
     bottom: 0; 
     right: 0;   
}