Как заставить изображение заполнить весь div при наведении?

Question

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

Вот код CSS:

  img{
    display: none;
    max-height: 50vh;
  }
  .effect:hover .text{
    display: none;
  }
  .effect:hover img{
    display: block;
  }

Вот код HTML:

        <div class="row">
          <div class="col-lg-3 alternate_2 effect">
            <h1 class="display-6 text">Studio Griot</h1>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
            <a href="#">
                <img src="images/Shalaj.JPG"/>
            </a>
          </div>
          <div class="col-lg-3 effect">
            <h1 class="display-6 text">Web Development</h1>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
            <a href="#">
                <img src="images/Shalaj.JPG"/>
            </a>
          </div>
          <div class="col-lg-3 alternate_2 effect">
            <h1 class="display-6 text">Data Visualisation</h1>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
            <a href="#">
                <img src="images/Shalaj.JPG"/>
            </a>
          </div>
          <div class="col-lg-3 effect">
            <h1 class="display-6 text">Incrediminds</h1>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
            <a href="#">
                <img src="images/Shalaj.JPG"/>
            </a>
          </div>
        </div>

Спасибо за помощь

Answer 1

РЕДАКТИРОВАТЬ с тем, что фактически хотел OP.

Вот изображение, которое занимает всю ширину и высоту без растяжения. Вы можете использовать object-fit: cover

Информация о object-fit: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.effect:hover .text {
  display: none;
}

.effect:hover img {
  display: block;
}

h1.text {
  font-size: 14px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-sm-3 alternate_2 effect">
    <h1 class="display-6 text">Studio Griot</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 effect">
    <h1 class="display-6 text">Web Development</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 alternate_2 effect">
    <h1 class="display-6 text">Data Visualisation</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 effect">
    <h1 class="display-6 text">Incrediminds</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
</div>

Добавьте width: 100% к изображению. Это сохранит его на 100% ширины его родителя. Я изменил вашу bootstrap разметку на col-sm, чтобы вы могли видеть ее при запуске сниппета.

Добавлена ​​информация для будущих посетителей:

img всегда будет отображаться как его собственный размер по умолчанию / собственный, если вы не укажете width: 100% и убедитесь, что это display: block, поскольку img по умолчанию inline.

img {
  display: none;
  width: 100%;
}

.effect:hover .text {
  display: none;
}

.effect:hover img {
  display: block;
}

h1.text {
  font-size: 14px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-sm-3 alternate_2 effect">
    <h1 class="display-6 text">Studio Griot</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 effect">
    <h1 class="display-6 text">Web Development</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 alternate_2 effect">
    <h1 class="display-6 text">Data Visualisation</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 effect">
    <h1 class="display-6 text">Incrediminds</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
</div>