Ссылка на эффект наведения

Question

Я использую эффект наведения CSS, липкую кожу (http://www.designrazor.net/30-pure-css3-image-hover-effects/). Я хочу попытаться поместить ссылку в задний круг.

Но моя проблема в том, что ссылка не доступна. Может ли кто-нибудь помочь мне понять, в чем проблема? Я думаю, что это из-за класса, но я не знаю, что мне нужно изменить или добавить в 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

Проблема у вас есть то, что хотя div s не похожи на него, они содержатся в коробках. Эти поля прозрачны и сложены поверх ссылки. Для того, чтобы сделать ссылку кликабельным вам необходимо изменить порядок наложения с помощью z-index:

• Добавить новое правило #Awesome a следующим:
  • position: relative; - Позволяет z-index работать
  • transition: z-index 0s; - гарантирует, что когда элемент не зависает, что переход от z-index: 1; к z-index: 0; является мгновенным
  • z-index: 0; - Будет позиционировать ссылку за другим эр элементы по умолчанию
• Добавить новое правило #Awesome:hover a следующие:
  • transition: z-index 1s ease-in-out; - гарантирую, что связь уложена над другими элементами, когда анимация заканчивается
  • z-index: 1; - Разместите ссылку выше других элементов

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