Tell me, please, how to make a link on a clickable block? I think that the problem is in the z-index property, but for some reason it cannot be fixed. Tell me please.

.test img{ width:100%; transition: all 0.6s ease-in-out 0s; position:relative; z-index:2; } .view a{ z-index:3; } .test img:hover { opacity:0.1; cursor:pointer; transform: scale(2) rotate(10deg); } .test { overflow:hidden; box-shadow: 0px 0px 20px 7px rgba(0,0,0,0.7); height:200px; margin-bottom:15px; -webkit-transform: translateZ(0) scale(1.0, 1.0); } .view { position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer; background-color:rgba(0,0,0,0.1); z-index:1; } 
 <div class="span12 test"> <img src="https://pp.vk.me/c615817/v615817671/19ee1/_QYeeox-ysU.jpg" alt="Core Values"> <div class="view"> <a href="http://www.google.ru">Ссылка на блоке</a> </div> </div> <a href="http://www.google.ru">Ссылка вне блока</a>

  • @Geyan no, by clicking on the link, the transition to Google does not occur (at least for me, the Chrome browser) - Dmitry Shulga
  • @Geyan Dude, that's not the point, as the link is written. Outside the block, it is clickable. On the block - no. ps adding www doesn't give anything - Dmitry Shulga
  • @Geyan nothing has changed - Dmitry Shulga
  • @Geyan is not quite ... when you hover over a link, the effect of turning the picture should remain - Dmitry Shulga
  • @Geyan if it is not difficult, please do it, but for now I will try a slightly different algorithm - Dmitry Shulga

1 answer 1

The problem was z-index and block size

 *{ margin:0; padding:0; line-height:1; transition:.5s; } .block,img{ width:400px; height:300px; cursor:pointer; } .block{ position:relative; z-index:0; overflow:hidden; } .block img:hover{ transform:rotate(10deg); transform:scale(1.5)rotate(-16deg); } .div1{ width:100%; position:absolute; top:0; left:0; z-index:2; } .div1 a{ display:block; width:40%; text-align:center; padding:15px 20px; } .block:hover .div1 a, .div1 a:hover{ background:rgba(255,255,255,.3); color:#fefefe; } 
 <div class="block"> <img src="http://wallpapertvs.com/wp-content/uploads/2014/09/dreamy_child_girl-wallpaper-1920x1200.jpg" alt="" /> <div class="div1"> <a href="http://google.kz">Любимый гугл</a> </div> <div class="div2"></div> </div>