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

So im 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 >
    <a target="_blank" href="hxxp://imnotputtingmyurlhere">
      <img src="hxxp://imnotputtingmyurlhere" alt="Demo Koi Gate Habanero" /></img>
    </a>
  <div >Hot Hot Fruit</div>
  </div>
  </div>

  <div >
  <a target="_blank" href="hxxp://imnotputtingmyurlhere">
      <img src="hxxp://imnotputtingmyurlhere" alt="Demo Koi Gate Habanero" /></img>
  </a>
  <div >Wealth Inn</div>
  </div>
  </div>

  <div >
    <a target="_blank" href="hxxp://imnotputtingmyurlhere">
      <img src="hxxp://imnotputtingmyurlhere" alt="Demo Slot Fa Cai Shen" /></img>
  </a>
  <div >Fa Cai Shen</div>
  </div>
  </div>

  <div >
  <a target="_blank" href="hxxp://imnotputtingmyurlhere">
      <img src="hxxp://imnotputtingmyurlhere" alt="Demo Slot Wild Trucks" /></img>
  </a>
  <div >Wild Trucks</div>
  </div>
  </div>


  <div >
  <a target="_blank" href="hxxp://imnotputtingmyurlhere">
      <img src="hxxp://imnotputtingmyurlhere" alt="Demo Slot Zeus" /></img>
  </a>
  <div >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?

CodePudding user response：

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 >
    <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" />
      <div >Hot Hot Fruit</div>
  </a>
  </div>
  <div >
  <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" />
      <div >Wealth Inn</div>
  </a>
  </div>
  <div >
    <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" />
     <div >Fa Cai Shen</div>
   </a>
  </div>
  <div >
  <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" />
      <div >Wild Trucks</div>
   </a>
  </div>
  <div >
  <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" />
      <div >Zeus</div>
  </a>
  </div>

CodePudding user response：

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

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