Как создать пространство между рамкой текста и изображением

Question

.success-secret {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

.success-secret-img-column {
  width: 50%;
  max-width: 875px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.success-secret-list-column {
  width: 50%;
  max-width: 875px;
  flex-shrink: 0;
  padding-left: 70px;
  box-sizing: border-box;
}

.success-secret-img {
  position: relative;
  margin: 0;
}

.success-secret-img img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.success-secret-img figcaption {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 600px;
  padding: 20px;
  box-sizing: border-box;
  background-color: #ffffff;
}

.success-secret-button {
  margin-left: auto;
}

.success-secret-title {
  max-width: 500px;
  font-size: 40px;
  line-height: 50px;
  font-weight: 700;
  color: #303030;
}

.success-secret-list {
  max-width: 500px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.success-secret-list-item {
  margin-bottom: 40px;
}

.success-secret-list-title {
  max-width: 500px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

<section class="success-secret">
  <div class="success-secret-list-column">
    <h2 class="success-secret-title">Почему бальзам «Swedish Bitter» завоевал такую популярность?</h2>
    <p class="success-secret-list-title">Вот лишь несколько причин:</p>
    <ul class="success-secret-list">
      <li class="success-secret-list-item">Эффективность как при наружном, так и внутреннем применении, более 40 показаний к применению</li>
      <li class="success-secret-list-item">Случаи излечения с помощью сбора, когда традиционная медицина не смогла помочь</li>
      <li class="success-secret-list-item">Постоянно выявляются новые целительные свойства бальзама</li>
      <li class="success-secret-list-item">Эффект от применения можно увидеть сразу</li>
    </ul>
  </div>
  <div class="success-secret-img-column">
    <figure class="success-secret-img">
      <img src="img/bg-cup.jpg" width="875" height="645" alt="Девушка что-то пьет из белой кружки">
      <figcaption>Даже в странах с очень высоким уровнем медицины, таких как Германия и Австрия, бальзам Шведская Горечь продаётся в каждой аптеке!</figcaption>
    </figure>
    <a class="success-secret-button green-button" href="#">Получить средство-панацею к себе в аптечку</a>
  </div>
</section>

Как должно быть	Как получилось

P.S Спасибо за помощь!!!

Answer 1

Есть тут особый способ что позволит такое сделать.

Давайте сделаем блок с изображением таким, чтобы все содержимое, что не помещается в него не было видно. Тогда можно будёт сделать тень которая будет как бы покрывать блок с текстом и в то же время выходить за рамки этого блока.

Так вот эта тень будет обрезана именно так, как нам и нужно:

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
}

.block {
  overflow: hidden;
  position: relative;
  height: 100vh;
  background-color: gray;
  background-image: url(https://cdn.create.vista.com/api/media/small/475214134/stock-photo-beautiful-woman-drinking-coffee-home);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
}

.inner {
  position: absolute;
  background-color: #fff;
  right: 20px;
  bottom: 0;
  max-width: 450px;
  padding: 30px;
  border: 1px solid black;
  box-shadow: 0 0 0 20px #fff;
}

.block-after {
  background-color: tomato;
  height: 200px;
}

<div class="site-wrapper">
  <div class="block">
    <div class="inner">
      <p class="block__text">Даже в странах с очень высоким уровнем медицины, таких как Германия и Австрия, бальзам Шведская Горечь продается в каждой аптеке! </p>
    </div>
  </div>

  <div class="block-after">

  </div>
</div>

Если имелось в виду, что это карточка товара, то нет проблем ;)

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
}

.card {
  max-width: 700px;
}

.card__header {
  overflow: hidden;
  position: relative;
  height: 100vh;
  background-color: gray;
  background-image: url(https://cdn.create.vista.com/api/media/small/475214134/stock-photo-beautiful-woman-drinking-coffee-home);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  border: 3px solid #90e0ef;
}

.card__text {
  position: absolute;
  background-color: #fff;
  right: 20px;
  bottom: 0;
  max-width: 450px;
  padding: 30px;
  border: 1px solid black;
  box-shadow: 0 0 0 20px #fff;
}

.card__button {
  display: block;
  cursor: pointer;
  margin:  0 calc(20px + 3px) 0 auto;
  background-color: lightgreen;
  color: white;
  padding: 20px;
  text-transform: uppercase;
  border: none;
  
  &::after {
    content: "\27F6";
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2em;
  }
}

.block-after {
  background-color: tomato;
  height: 200px;
}

<div class="site-wrapper">
  <article class="card">
    <header class="card__header">
        <p class="card__text">Даже в странах с очень высоким уровнем медицины, таких как Германия и Австрия, бальзам Шведская Горечь продается в каждой аптеке! </p>
     </header>
    
    <footer class="card__footer">
      <button class="card__button">
        получить средство-панацею к себе в аптечку
      </button>
    </footer>
  </article>
  
  <div class="block-after">
    
  </div>
</div>

БЛОГ НА HUSL

Как создать пространство между рамкой текста и изображением

Ответы (1 шт):