Make Annotation clickable in Annotation Overlay Effect with CSS3 by Tympanus

Question

I came across this very neat annotation overlay effect: http://tympanus.net/codrops/2012/05/14/annotation-overlay-effect-with-css3/

You can see a live demo here: http://tympanus.net/Tutorials/CSS3AnnotationOverlayEffect/ (you will need to click on the picture there to see the effect)

I am trying to make the text within annotation <span> clickable with some external link, like:

<span><a href="http://google.com">Easy Theme Options</a></span>

but it doesn't work... whenever I click on the annotation, it transitions back to full size image.

I appreciate any help, thank you!

Answer 1

I made it work, as you see in this Fiddle.

The problem is that the checkbox is always over the spans. And because all the checkbox and the spans are positioned absolute, changing the z-index wouldn't work! The only way I found it to work with only CSS (by not changing to much) is by messing with the pointer-events property and the <div class="ao-annotations">'s z-index. (z-index is layered within an element. Because the annotations <div> and the checkbox are both in <div class="ao-preview">, changing the <span> z-index wouldn't work.

I did the following:

I set the z-index of the div.ao-annotations higher than the input.ao-toggle. This results to not being able to click on the input, so not being able to toggle.

To solve this I added pointer-events: none to the <div class="ao-annotations">. Now the result is the same, but the <span>s are now positioned on top of the input.

To be able to click on the <span>s I added this CSS:

input.ao-toggle:checked ~ .ao-annotations span{
    pointer-events: auto;
}

This results to only being able to click on the <span>s when the checkbox is checked.

Summary:

.ao-annotations {
    z-index: 20;
    pointer-events: none;
}

input.ao-toggle {
    z-index: 10;
}

input.ao-toggle:checked ~ .ao-annotations span{
    pointer-events: auto;
}

I am very sad to say this only works in IE11 (and all the other browsers)... So you'd probably have to 'hack' with Javascript or rebuild the HTML / CSS.

I hope you can build on this!