1

I have two tricky issues that are intertwined. I have an inset box shadow vignette on four sides of a box but I have clickable images inside that I can’t click because the shadow/vignette is above the images (which are at z-index: -1). I read some about using the pointer-events: none but I think it is affecting everything in the box when I try to use it so it hasn’t worked. Any suggestions on how to make these images clickable but still behind the shadow?

Also, I’ve read through previous posts about scrolling speed with the box shadows. I’ve made it as small as possible but has anyone figured out how to make that go faster yet? I really like the look but the functionality doesn’t work if the scroll is going to be so slow.

Here are links to the site as constructed so far.

http://www.official-design.com/TEST_PROJECT.html http://www.official-design.com/TEST_GRID.html

Please be nice – I am a novice at this – I’m an architect not a web designer. Any advice would be greatly appreciated.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
user1725832
  • 11
  • 1
  • Do you actually have issues with scrolling speed? I believe it is purely the matter of the script settings in your case. – unclenorton Nov 14 '12 at 03:19

2 Answers2

0

Why do you have z-index: -1 for the links? Remove that and the links work fine, and the shadow is still visible.

I would also recommend applying the box shadow to the img or a elements directly, rather than the td that contains them.

Chris Herbert
  • 6,145
  • 3
  • 19
  • 31
0

Removing the negative z-index won't work with inset shadows. There are 3 things to do to achieve what you need:

  1. Remove superfluous float: left from #makeMeScrollable div.scrollableArea img rule. This is to ensure that the <a> element wraps the image properly.
  2. Remove box-shadow properties from .SHADOW rule.

  3. Add the following CSS for your links:

    .SHADOW a {
  display: block;
  -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.25);
}

Note that I've used rgba value instead of #ccc, since the shadow will be overlaid on the image.

As a side note, there is no need to name classes in all caps. It decreases the readability.

unclenorton
  • 1,605
  • 11
  • 19