'a href link of an image not taking up all image size in a box

So I'm making a list of menus, each menu links to another page using a picture.

First I wrote the CSS

    .gallery {
      margin: 5px;
      border: 1px solid #ffd700;
      float: left;
      width: 140px;
    }
    
    .gallery:hover {
      border: 1px solid #777;
    }
    
    .gallery img {
      width: 100%;
      height: auto;
    }
    
    .desc {
      padding: 15px;
      text-align: center;
    }

Second, I made the HTML code. Koi Gate 

  <div class="gallery">
    <a target="_blank" href="hxxp://imnotputtingmyurlhere">
      <img src="hxxp://imnotputtingmyurlhere" alt="Demo Koi Gate Habanero" class="wp-image-262"/></img>
    </a>
  <div class="desc">Hot Hot Fruit</div>
  </div>
  </div>

  <div class="gallery">
  <a target="_blank" href="hxxp://imnotputtingmyurlhere">
      <img src="hxxp://imnotputtingmyurlhere" alt="Demo Koi Gate Habanero" class="wp-image-262"/></img>
  </a>
  <div class="desc">Wealth Inn</div>
  </div>
  </div>

  <div class="gallery">
    <a target="_blank" href="hxxp://imnotputtingmyurlhere">
      <img src="hxxp://imnotputtingmyurlhere" alt="Demo Slot Fa Cai Shen" class="wp-image-262"/></img>
  </a>
  <div class="desc">Fa Cai Shen</div>
  </div>
  </div>

  <div class="gallery">
  <a target="_blank" href="hxxp://imnotputtingmyurlhere">
      <img src="hxxp://imnotputtingmyurlhere" alt="Demo Slot Wild Trucks" class="wp-image-262"/></img>
  </a>
  <div class="desc">Wild Trucks</div>
  </div>
  </div>


  <div class="gallery">
  <a target="_blank" href="hxxp://imnotputtingmyurlhere">
      <img src="hxxp://imnotputtingmyurlhere" alt="Demo Slot Zeus" class="wp-image-262"/></img>
  </a>
  <div class="desc">Zeus</div>
  </div>
  </div>
  </div>

However, the result is the links are not taking the full space to the whole picture used. Would anyone please help me?

htmlcss


Solution 1:[1]

Change Your Html

.gallery {
  margin: 5px;
  border: 1px solid #ffd700;
  float: left;
  width: 140px;
}
.gallery:hover {
  border: 1px solid #777;
}
.gallery img {
  width: 100%;
  height: auto;
}
.desc {
  padding: 15px;
  text-align: center;
}
    <div class="gallery">
    <a target="_blank" href="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg">
      <img src="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg" alt="Demo Koi Gate Habanero" class="wp-image-262"/>
      <div class="desc">Hot Hot Fruit</div>
  </a>
  </div>
  <div class="gallery">
  <a target="_blank" href="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg">
      <img src="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg" alt="Demo Koi Gate Habanero" class="wp-image-262"/>
      <div class="desc">Wealth Inn</div>
  </a>
  </div>
  <div class="gallery">
    <a target="_blank" href="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg">
      <img src="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg" alt="Demo Slot Fa Cai Shen" class="wp-image-262"/>
     <div class="desc">Fa Cai Shen</div>
   </a>
  </div>
  <div class="gallery">
  <a target="_blank" href="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg">
      <img src="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg" alt="Demo Slot Wild Trucks" class="wp-image-262"/>
      <div class="desc">Wild Trucks</div>
   </a>
  </div>
  <div class="gallery">
  <a target="_blank" href="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg">
      <img src="https://thumbs.dreamstime.com/b/black-demo-icon-white-background-black-demo-icon-116555294.jpg" alt="Demo Slot Zeus" class="wp-image-262"/>
      <div class="desc">Zeus</div>
  </a>
  </div>

Solution 2:[2]

On mouse over a is taking whole img, but when you inspect it look smaller. That is because img tag is by default display: inline-block; and a tag is display: inline;.

enter image description here

In your example for a you have to place display: block; and it will cover whole img tag. Div with name <div class="desc">Zeus</div> is outside of a tag

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rajat Meshram
Solution 2

Related Questions