Why does my 'a href' link not work inside 'divs'?

I wrote the following code which creates animated circles/icons that should lead to another page:

<html>
<body>

<div id="homepageBanner"><img src="images/eris-background.jpg" width="100%" height="500px;" ; />

  <div id="LPRCircle">
    <center>
      <div class="CircleContainer">
        <a href="Eris-LPR.html"><h5>LPR / ANPR</h5></a>
        <center>
          <div><img src="images/circles/LPR_Normal.jpg" width="280px;" class="imgCircle" /></div>
        </center>
      </div>
    </center>
  </div>
</div>

</body>
</html>

And this is the css:

#LPRCircle {
  height: 250px;
  width: 250px;
  border: 4px solid rgb(30, 154, 148);
  position: absolute;
  left: 10%;
  top: 290px;
  overflow: hidden;
  background: rgba(30, 154, 148, 0.5);
  margin-right: 4px;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 135px;
  -moz-border-radius: 135px;
  border-radius: 135px;
  z-index: 3;
}
.CircleContainer {
  z-index: 4;
}
#LPRCircle a {
  text-align: center;
  width: 100%;
  height: 100%;
  display: block;
  color: #333;
  position: page;
  vertical-align: central;
  text-decoration: none;
}
#LPRCircle:hover a h2 {
  color: rgb(48, 48, 48);
}
#LPRCircle .CircleContainer .imgCircle {
  opacity: 0;
  visibility: hidden;
  left: -25px;
  top: -20px;
  position: absolute;
  transition: opacity 0.5s linear;
  -moz-transition: opacity 0.5s linear;
  -webkit-transition: opacity 0.5s linear;
  z-index: 2;
}
#LPRCircle .CircleContainer:hover .imgCircle {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s linear;
  -moz-transition: opacity 0.5s linear;
  -webkit-transition: opacity 0.5s linear;
  z-index: 2;
}

I guess, the problem is that something is overlapping the link, or the link does not work in so many divs. I'm not sure at all, but the problem is that nothing happens when I click on the circle which contains the link.

Solution

Thank you everybody for your answers. I finally found the answer myself. In short I changed the HTML code of one circle for example to this:

<div id="homepageBanner">
  <div class="CircleContainer">
    <a href="Eris-LPR.html">
      <div id="LPRcircle">
        <div class="CircleText">
          <h2>LPR / ANP</h2>
          <img src="images/circles/Access_Normal.jpg" class="imgCircle">
        </div>
      </div>
    </a>
  </div>
</div>

So I basically made the a href tag to contain the whole image and text, and then changed the CSS as follows:

.CircleContainer {
  width: 100%;
  height: 100%;
  color: #333;
  text-decoration: none;
  display: table;
  text-align: center;
  vertical-align: middle;
  display: table;
}
.CircleText {
  padding-top: 70px;
  font-family: eris;
  font-size: 1em;
}
.CircleContainer:hover h2 {
  display: none;
}
.CircleContainer img {
  opacity: 0;
  visibility: hidden;
  left: -2px;
  top: -2px;
  width: 250px;
  transition: opacity 0.5s linear;
  -moz-transition: opacity 0.5s linear;
  -webkit-transition: opacity 0.5s linear;
}
.CircleContainer:hover img {
  opacity: 1;
  visibility: visible;
  position: absolute;
}
#LPRcircle {
  z-index: 2;
  height: 250px;
  width: 250px;
  border: 4px solid rgb(30, 154, 148);
  left: 10%;
  top: 290px;
  overflow: hidden;
  background: rgba(30, 154, 148, 0.5);
  margin-right: 4px;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 135px;
  -moz-border-radius: 135px;
  position: absolute;
  display: table-cell;
  border-radius: 135px;
}

The major change in the CSS was that I set the .CircleContainer display attribute to :table and the contained elements to :table-cell.

And it finally worked! :)

Thanks everybody for your time and answers :)