CODEWITHSUNDEEP
htmlcss
jaskowice1
jaskowice1

Reputation: 33

Link in position absolute doesn't work

Anyone know why not work me a link when I hover on the picture?

I added a hover effect and link stopped working :/

Anyone know how I can fix this problem?

/*** effect inner-shadow ***/
.image-home-effect {
  position: relative;
}
.image-home-effect:before {
  content:'';
  float:left;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:20;
  cursor: pointer;
  margin-top: -12px;
  height: 222px;

}
.image-home-effect:before {
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition:all 1s;
}
.image-home-effect:hover:before {
  box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9);
  -moz-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9);
  -webkit-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9)
}
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
  <div class="content-box">
    <a href="http://www.onet.pl/" target="_blank"><h2>Meble biurowe</h2></a>
    <div class="image-home-effect">
      <a href="http://www.onet.pl/" target="_blank" class="img-inner-shadow"><img src="images/meble-biurowe.jpg"></a>
    </div>
  </div>
</div>

Upvotes: 0

Views: 239

Answers (3)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9449

Wrap the anchor around your div 

 <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
      <div class="content-box">
        <a href="http://www.onet.pl/" target="_blank"><h2>Meble biurowe</h2></a>
        <a href="http://www.onet.pl/" target="_blank" class="img-inner-shadow">
        <div class="image-home-effect">

                <img src="images/meble-biurowe.jpg">
        </div></a>
      </div>
    </div>

Upvotes: 0

tarasikgoga
tarasikgoga

Reputation: 45

i am not sure but may be this help you http://jsfiddle.net/5z4paLgr/4/

HTML

<a href="http://www.onet.pl/" target="_blank" class="image-home-effect"><img src="images/meble-biurowe.jpg"></a>

CSS

    .image-home-effect {
  position: relative;
}
.image-home-effect:before {
  content:'';
  float:left;
  position:absolute;
  top:0;
  left:0;
  width:500px;
  height:500px;
  z-index:20;
  cursor: pointer;
  margin-top: -12px;
  height: 222px;

}
.image-home-effect:before {
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition:all 1s;
}
.image-home-effect:hover:before {
  box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9);
  -moz-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9);
  -webkit-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9)
}

Upvotes: 0

tylerism
tylerism

Reputation: 679

Try putting your anchor tag on the outside of the div with class image-home-effect.

like this:

<a href="http://www.onet.pl/" target="_blank" class="img-inner-shadow">
    <div class="image-home-effect">
      <img src="images/meble-biurowe.jpg">
    </div>
</a>

Upvotes: 1

Related Questions