I have a large image at the top of my website. I set a dummy div with inset shadow over it. The problem is that the image is a link and must be clickable but the shadow div
overlays it and prevents that.
You can see my issue in this FIDDLE
HTML :
<div id="menu"></div>
<div id="wrap">
<div id="shadow"></div>
<div id="img">
<div id="dummy"></div>
<a href="#">
<img src="http://placekitten.com/1000/300"/>
</a>
</div>
</div>
<div id="content"></div>
CSS
body, html {
width:100%;
padding:0;
margin:0;
}
#menu {
width:100%;
background-color:blue;
height:60px;
}
#wrap {
width:100%;
position:relative;
}
#shadow {
position:absolute;
left: 0;
top:0;
right:0;
bottom:0;
-webkit-box-shadow: inset 0px 10px 15px -10px rgba(0, 0, 0, 1), inset 0px -10px 15px -10px rgba(0, 0, 0, 1);
box-shadow: inset 0px 10px 15px -10px rgba(0, 0, 0, 1), inset 0px -10px 15px -10px rgba(0, 0, 0, 1);
z-index:5;
}
#img{
width:100%;
max-width:700px;
margin:0 auto;
position:relative;
}
#dummy {
width:100%;
padding-top:30%;
}
#img a {
position:absolute;
top:0;
left:0;
z-index:2;
}
#img a img {
width:100%;
height:auto;
}
#content {
width:100%;
height:1000px;
}
I need the image to be clickable keeping the responsive effect.
You can't do it with this HTML
structure. Basically, you can't click on an element that is under another.
I updated your fiddle : http://jsfiddle.net/d2sTD/18/
In a word : I changed the HTML so the shadow is in your <a>
element.
Re-Ordered HTML
<div id="menu"></div>
<div id="wrap">
<a href="#" id="shadow"></a>
<div id="img">
<div id="dummy"></div>
<img src="http://placekitten.com/1000/300"/>
</div>
</div>
<div id="content"></div>
You can set the pointer-events
to none
on the #shadow div
CSS
#shadow {
pointer-events:none;
}
Browser Support is IE11 and modern browsers
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.