Высота изображения превышает контейнер с добавленным элементом

Question

Я проверяю, является ли div smallCatalogBlock, если data-availability="No", и если нет, то soonOverlay добавляется к smallCatalogBlockImg div.

У меня проблема с высотой soonOverlay, которая покрывает только изображение. Справа коса, он превышает контейнер изображения и заполняет весь smallCatalogBlock дел.

Что я мог сделать, чтобы покрыть только smallCatalogBlockImg?

$('.smallCatalogBlock').each(function() {
		if ($(this).data('availability') === 'No') {
			$(this).find('.smallCatalogBlockImg').append('<div class="soonOverlay"><div class="soonOverlayInner"><div class="total-center"><p class="dGw">Coming Soon</p></div></div></div>');
		}
	});

.smallCatalogWrap {
	width: 100%;
	height: auto;
	margin: 60px 0;
}
.smallCatalogBlock {
	width: 45%;
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin: 20px auto;
	text-decoration: none;
}
.smallCatalogBlock img {
	width: 80%;
	height: auto;
	box-shadow: 10px 5px 5px rgba(0,0,0,.3);
	display: block;
	margin: 0px auto 15px auto;
}
.smallCatalogTitle {
	font-family: 'Nunito', sans-serif;
	color: #4d4d4d;
	font-size: 1.3rem;
	text-align: center;
	display: block;
	font-weight: 400;
}
.comingSoonSmall {
	position: relative;
}
.comingSoonSmall .soonOverlay {
	width: 80%;
	height: 100%;
	background: #b82222;
	opacity: .8;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: 0 10%;
}
.soonOverlayInner {
	position: relative;
	min-height: 350px;
}
.soonOverlayInner .dGw {
	font-weight: 600;
	text-transform: uppercase;
	font-size: 2rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smallCatalogBlock comingSoonSmall" data-availability="No">
    <div class="smallCatalogBlockImg">
      <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="A">
    </div>
  <span class="smallCatalogTitle">A</span>
</div><div class="smallCatalogBlock comingSoonSmall" data-availability="No">
    <div class="smallCatalogBlockImg">
      <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="B">
    </div>
  <span class="smallCatalogTitle">B</span>
</div>

Answer 1

Вы забыли относительно размещения родительского элемента наложения. Только тогда оверлей может быть (абсолютно) размещен и измерен относительно его родителя.

Подробнее здесь.

$('.smallCatalogBlock').each(function() {
  if ($(this).data('availability') === 'No') {
    $(this).find('.smallCatalogBlockImg').append('<div class="soonOverlay"><div class="soonOverlayInner"><div class="total-center"><p class="dGw">Coming Soon</p></div></div></div>');
  }
});

.smallCatalogWrap {
  width: 100%;
  height: auto;
  margin: 60px 0;
}

.smallCatalogBlock {
  width: 45%;
  height: auto;
  display: inline-block;
  vertical-align: top;
  margin: 20px auto;
  text-decoration: none;
}

.smallCatalogBlock img {
  width: 80%;
  height: auto;
  box-shadow: 10px 5px 5px rgba(0, 0, 0, .3);
  display: block;
  margin: 0px auto 15px auto;
}

.smallCatalogTitle {
  font-family: 'Nunito', sans-serif;
  color: #4d4d4d;
  font-size: 1.3rem;
  text-align: center;
  display: block;
  font-weight: 400;
}

.comingSoonSmall {
  position: relative;
}

.comingSoonSmall .soonOverlay {
  width: 80%;
  height: 100%;
  background: #b82222;
  opacity: .8;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0 10%;
}

.soonOverlayInner {
  position: relative;
  min-height: 350px;
}

.soonOverlayInner .dGw {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1rem;
  text-align: center;
}

.smallCatalogBlockImg {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smallCatalogBlock comingSoonSmall" data-availability="No">
  <div class="smallCatalogBlockImg">
    <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="A">
  </div>
  <span class="smallCatalogTitle">A</span>
</div>
<div class="smallCatalogBlock comingSoonSmall" data-availability="No">
  <div class="smallCatalogBlockImg">
    <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="B">
  </div>
  <span class="smallCatalogTitle">B</span>
</div>