Как бы я сделал контент внутри и изображение, чтобы быть отзывчивым

Question

У меня есть прозрачный круг, который является изображением. Я хотел разместить контент внутри круга. Но в тот момент, когда я изменяю размер экрана, либо круг меняет свой размер, либо текст внутри удаляется от круга. Как бы это исправить?

Я использую загрузчик 4 https://codepen.io/mahirq8/pen/oNNMvwy

.img-1 {
  height: auto;
  max-width: 140%;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(3deg);
  transform: rotate(30deg);
}

.text-block1 {
  position: absolute;
  bottom: 250px;
  left: 220px;
  color: white;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row d-flex col-12 justify-content-center">
  <div class="col-lg-3 mx-4 wow fadeInUp" data-wow-delay="500ms" style="right:50px">
    <div class="container">
      <a href="https://ibb.co/Qr5w3wd"><img src="https://i.ibb.co/pJmFBFy/d9c2e11f-5620-48f1-b619-037bd9ab64fd.jpg" alt="d9c2e11f-5620-48f1-b619-037bd9ab64fd" border="0"></a>

      <div class="text-block1">
        <div class="card-body  " style="text-align:center; text-transform:none">
          <h5 class="card-title" style="font-family: Arima Madurai; color:#3d5a98 ; font-size:20px;">
            Intelligently<br>Designed Courses</h5>

          <p class="card-text wow fadeInUp" data-wow-delay="750ms" style="color: black; font-weight: 400; line-height:22px; font-size:19px">
            Our programs and<br>courses are<br>thoughtfully curated to<br>provoke creativity,<br>nurture growth and<br>push boundaries.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Вот мой сайт, где вы можете увидеть фактический результат в средней части с 3 кружками. Любые предложения будут высоко оценены.

Спасибо

Answer 1

Есть несколько шагов, которые вам необходимо предпринять:

1. .container должно быть position: relative, поэтому текст будет position: absolute относительно него.
2. Чтобы сделатьТекст ВСЕГДА выровнен по центру, есть некоторые хитрости, но мой любимый это

{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(50%, 50%);
}

Сделать font-size относительно размера экрана. Вы можете сделать это с помощью media queries

.container {
  position: relative;
}

img {
  max-width: 100%;
}

.img-1 {   
  height: auto;
  max-width: 140%;
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(3deg);
  transform: rotate(30deg);
}

.text-block1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row d-flex col-12 justify-content-center">
  <div class="col-lg-3 mx-4 wow fadeInUp" data-wow-delay="500ms" style="right:50px">
    <div class="container">
      <a href="https://ibb.co/Qr5w3wd"><img src="https://i.ibb.co/pJmFBFy/d9c2e11f-5620-48f1-b619-037bd9ab64fd.jpg" alt="d9c2e11f-5620-48f1-b619-037bd9ab64fd" border="0"></a>

      <div class="text-block1">
        <div class="card-body  " style="text-align:center; text-transform:none">
          <h5 class="card-title"
              style="font-family: Arima Madurai; color:#3d5a98 ; font-size:20px;">
            Intelligently<br>

            Designed Courses</h5>

          <p class="card-text wow fadeInUp" data-wow-delay="750ms"
             style="color: black; font-weight: 400; line-height:22px; font-size:19px">
            Our programs and<br>
            courses are<br>
            thoughtfully curated to<br>
            provoke creativity,<br>
            nurture growth and<br>
            push boundaries.</p>
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/moshfeu/full/wvvxvaz