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

Question

Имеется изображение, при наведении на которое происходит затемнение и появляется спрятанный текст. Но высота изображения определяется количеством символов в <р>, как можно исправить значения height или как-то переделать макет в целом? Позаимствовал идею со стороны, но в оригинале width и height указаны в пикселях, под адаптивность не пойдет.

HTML

      <div class="col-lg-4">
        <div class="img-2">
          <p class="invicible-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, natus.</p>
        </div>
      </div>

CSS

.img-2 {
    background-image: url(https://img.freepik.com/premium-photo/medium-shot-smiley-veterinarian-posing-with-uniform_23-2148302259.jpg);
    width: 100%;
    height: auto;
    border-radius: 5%; 
}
.invicible-p {
    opacity: 0;
    text-align: center;
    color: #fff;
    transition: .5s ease;
}
.img-2:hover .invicible-p {
    opacity: 1;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

Answer 1

.img-2 {
  border-radius: 55px;
  overflow: hidden;
}

.invicible-p {
  width: 100%;
  height: 100%;
  opacity: 0;
  text-align: center;
  color: #fff;
  transition: .5s ease;
  top: 0;
  position: absolute;
  z-index: 2;
}

.img-2:hover .invicible-p {
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.img-2 {
  position: relative;
}

img {
  width: 100%;
}

<div class="col-lg-4">
  <div class="img-2">
    <div class="invicible-p">
      <p class="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, natus.</p>
    </div>
    <img src="https://img.freepik.com/premium-photo/medium-shot-smiley-veterinarian-posing-with-uniform_23-2148302259.jpg" alt="">
  </div>
</div>

Примерно это хотел увидеть ?

БЛОГ НА HUSL

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

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