Link on hover effect

Question

I'm using a CSS hover effect, the peel sticky (http://www.designrazor.net/30-pure-css3-image-hover-effects/). I want to try to put a link in the back circle.

But my problem is that the link is not clickable. Can anyone help me see what the problem is? I think it is because of the class but I don't know what I have to change or to put in the CSS .

.anim750 {
  transition: all 750ms ease-in-out;
}
#Awesome {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  backface-visibility: hidden;
}
#Awesome .sticky {
  transform: rotate(45deg);
}
#Awesome:hover .sticky {
  transform: rotate(10deg);
}
#Awesome .sticky {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
}
#Awesome .reveal .circle {
  box-shadow: 0 1px 0px rgba(0, 0, 0, .15);
  font-family: 'helvetica neue', arial;
  font-weight: 200;
  line-height: 140px;
  text-align: center;
  cursor: pointer;
}
#Awesome .reveal .circle {
  background: #fafafa;
}
#Awesome .circle_wrapper {
  position: absolute;
  width: 180px;
  height: 180px;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
#Awesome .circle {
  position: absolute;
  width: 140px;
  height: 140px;
  margin: 20px;
  border-radius: 999px;
}
#Awesome .back {
  height: 10px;
  top: 30px;
}
#Awesome:hover .back {
  height: 90px;
  top: 110px;
}
#Awesome .back .circle {
  margin-top: -130px;
  background-color: #fbec3f;
  background-image: -webkit-linear-gradient(bottom, rgba(251, 236, 63, .0), rgba(255, 255, 255, .8));
}
#Awesome:hover .back .circle {
  margin-top: -50px;
}
#Awesome .front {
  height: 150px;
  bottom: 0;
  top: auto;
  -webkit-box-shadow: 0 -140px 20px -140px rgba(0, 0, 0, .3);
}
#Awesome:hover .front {
  height: 70px;
  -webkit-box-shadow: 0 -60px 10px -60px rgba(0, 0, 0, .1);
}
#Awesome .front .circle {
  margin-top: -10px;
  background: #fbec3f;
  background-image: -webkit-linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
  background-image: -moz-linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
  background-image: linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
}
#Awesome h4 {
  font-family: 'helvetica neue', arial;
  font-weight: 200;
  text-align: center;
  position: absolute;
  width: 180px;
  height: 140px;
  line-height: 140px;
  transition: opacity 50ms linear 400ms;
}
#Awesome:hover h4 {
  opacity: 0;
  transition: opacity 50ms linear 300ms;
}
#Awesome:hover .front .circle {
  margin-top: -90px;
  background-color: #e2d439;
  background-position: 0 100px;
}

<div id="Awesome" class="anim750">

  <div class="reveal circle_wrapper">
    <div class="circle"><a href="www.google.com">click</a>
    </div>
  </div>

  <div class="sticky anim750">
    <div class="front circle_wrapper anim750">
      <div class="circle anim750"></div>
    </div>
  </div>

  <div class="sticky anim750">
    <div class="back circle_wrapper anim750">
      <div class="circle anim750"></div>
    </div>
  </div>

</div>

Answer 1

The problem you have is that although the divs don't look like it they are contained in boxes. These boxes are transparent and stacked on top of the link. To make the link clickable you need to modify the stacking order by using z-index:

• Add a new rule #Awesome a with the following:
  • position: relative; - Enables z-index to work
  • transition: z-index 0s; - Will ensure that when the element is not hovered that the transition from z-index: 1; to z-index: 0; is instant
  • z-index: 0; - Will position the link behind the other elements by default
• Add a new rule #Awesome:hover a with the following:
  • transition: z-index 1s ease-in-out; - Will ensure that the link is stacked above the other elements when the animation ends
  • z-index: 1; - Will place the link above the other elements

.anim750 {
  transition: all 750ms ease-in-out;
}
#Awesome {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  backface-visibility: hidden;
}
#Awesome .sticky {
  transform: rotate(45deg);
}
#Awesome:hover .sticky {
  transform: rotate(10deg);
}
#Awesome .sticky {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
}
#Awesome .reveal .circle {
  box-shadow: 0 1px 0px rgba(0, 0, 0, .15);
  font-family: 'helvetica neue', arial;
  font-weight: 200;
  line-height: 140px;
  text-align: center;
  cursor: pointer;
}
#Awesome .reveal .circle {
  background: #fafafa;
}
#Awesome .circle_wrapper {
  position: absolute;
  width: 180px;
  height: 180px;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
#Awesome .circle {
  position: absolute;
  width: 140px;
  height: 140px;
  margin: 20px;
  border-radius: 999px;
}
#Awesome .back {
  height: 10px;
  top: 30px;
}
#Awesome:hover .back {
  height: 90px;
  top: 110px;
}
#Awesome .back .circle {
  margin-top: -130px;
  background-color: #fbec3f;
  background-image: -webkit-linear-gradient(bottom, rgba(251, 236, 63, .0), rgba(255, 255, 255, .8));
}
#Awesome:hover .back .circle {
  margin-top: -50px;
}
#Awesome .front {
  height: 150px;
  bottom: 0;
  top: auto;
  -webkit-box-shadow: 0 -140px 20px -140px rgba(0, 0, 0, .3);
}
#Awesome:hover .front {
  height: 70px;
  -webkit-box-shadow: 0 -60px 10px -60px rgba(0, 0, 0, .1);
}
#Awesome .front .circle {
  margin-top: -10px;
  background: #fbec3f;
  background-image: -webkit-linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
  background-image: -moz-linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
  background-image: linear-gradient(bottom, rgba(251, 236, 63, .0) 75%, #f7bb37 95%);
}
#Awesome h4 {
  font-family: 'helvetica neue', arial;
  font-weight: 200;
  text-align: center;
  position: absolute;
  width: 180px;
  height: 140px;
  line-height: 140px;
  transition: opacity 50ms linear 400ms;
}
#Awesome:hover h4 {
  opacity: 0;
  transition: opacity 50ms linear 300ms;
}
#Awesome:hover .front .circle {
  margin-top: -90px;
  background-color: #e2d439;
  background-position: 0 100px;
}
#Awesome a {
  position: relative;
  transition: z-index 0s;
  z-index: 0;
}
#Awesome:hover a {
  transition: z-index 1s ease-in-out;
  z-index: 1;
}

<div id="Awesome" class="anim750">

  <div class="reveal circle_wrapper">
    <div class="circle"><a href="www.google.com">click</a>
    </div>
  </div>

  <div class="sticky anim750">
    <div class="front circle_wrapper anim750">
      <div class="circle anim750"></div>
    </div>
  </div>

  <div class="sticky anim750">
    <div class="back circle_wrapper anim750">
      <div class="circle anim750"></div>
    </div>
  </div>

</div>