CODEWITHSUNDEEP
htmlcss
user12030877
user12030877

Reputation:

How to make an image fill the entire div on hover?

I want an image to show up on the div when I hover it. The code I am using makes the image larger than the div, how can I contain it to the fill the size of the div and not leak?

Here is the CSS code:

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

Here is the HTML code:

        <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>

Thanks For The Help

Upvotes: 0

Views: 785

Answers (1)

disinfor
disinfor

Reputation: 11533

EDIT with what OP actually wanted.

Here is the image that takes up the full width and height without stretching. You can use object-fit: cover

Information on 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>

Add width: 100% to the img. That will keep it 100% width of its parent. I changed your bootstrap markup to col-sm so you could see it when you run the snippet.

Added information for future visitors:

An img will always display as large as its own default/native size, unless you specify the width: 100% and make sure it is display: block, since img are inline by default. 

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>

Upvotes: 1

Related Questions