CODEWITHSUNDEEP
htmlcss
John_Doe
John_Doe

Reputation: 3

CSS/html - Clickable area is larger than image

I am quite new to html and CSS, and currently I am doing a hobby website project. On my portfolio page I have some images that also work as links, however the clickable area of the link is larger than the image itself. I have looked through different answers here on stackoverflow, which has helped a bit, but the problem has not been resolved yet.

I would greatly appreciate if someone could have a look at my code, and lead me in the right direction.

/*PORTFOLIO*/

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0px 0px;
}

.column {
  flex: 100%;
  max-width: 100%;
}

.column img {
  /*display: inline-block;
    height: 300px;
    width: 400px;
    margin: 50px 50px;
    object-fit: cover;
    border-radius: 10%; */
  vertical-align: middle;
}

.container {
  position: relative;
  /*width: 400px;*/
  width: 100%;
}

.image {
  display: block;
  height: 300px;
  width: 400px;
  margin: 50px 50px;
  object-fit: cover;
  border-radius: 10%;
}

.overlay {
  display: inline-block;
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 50px;
  right: 0;
  height: 300px;
  width: 400px;
  opacity: 0;
  transition: 0.5s ease;
  background-color: black;
  border-radius: 10%;
}

.container:hover .overlay {
  opacity: 0.8;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.column a {
  display: inline-block !important;
}
<header>
  <nav>
    <li><a href="index.html">Home</a></li>
    <li><a href="portfolio.html">Portfolio</a></li>
    <li><a href="contact.html">Contact</a></li>
  </nav>

  <div class="row">
    <div class="column">
      <a href="">
        <div class="container">
          <img src="https://via.placeholder.com/500" class="image">
          <div class="overlay">
            <div class="text">Sound Insulation between Lille and Store Vega</div>
          </div>
        </div>
      </a>
      <a href="">
        <div class="container">
          <img src="https://via.placeholder.com/500" class="image">
          <div class="overlay">
            <div class="text">Sonic Crystals at Roskilde Festival</div>
          </div>
        </div>
      </a>
    </div>
    <div class="column">
      <a href="">
        <div class="container">
          <img src="https://via.placeholder.com/500" class="image">
          <div class="overlay">
            <div class="text">Programming</div>
          </div>
        </div>
      </a>
      <a href="">
        <div class="container">
          <img src="https://via.placeholder.com/500" class="image">
          <div class="overlay">
            <div class="text">Psychoacoustics</div>
          </div>
        </div>
      </a>
    </div>
  </div>


</header>

Upvotes: 0

Views: 680

Answers (2)

s1834
s1834

Reputation: 443

I know your question is already answered and your problem is already solved but I have a suggestion for you that next time you code use Viewport Units like vw and vh instead of px and % because it will help you make your webpage/website responsive.

And as you are talking about clickable areas I think you will like using Image Map. I am attaching an image and a code, copy it and see how it works. I'm damn sure you will like it.

enter image description here

<!DOCTYPE html>
<html>
<head>
      <title>Image Map</title>
</head>
<body>
<img src="Images/Image Map.jpg" alt="Image Map" usemap="#imagemap" width="400" height="379">
<map name="imagemap">
    <area shape="rect" coords="34,44,270,350" alt="Computer" href="https://en.wikipedia.org/wiki/Computer">
    <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://en.wikipedia.org/wiki/Coffee">
    <area shape="rect" coords="290,172,333,250" alt="IPhone" href="https://en.wikipedia.org/wiki/IPhone">
</map>
</body>
</html>

Upvotes: 0

Nico Shultz
Nico Shultz

Reputation: 1872

Your images have margin so all the space created by the margin is also clickable because they are inside your a tag

Upvotes: 3

Related Questions