XF 2.2 I created a cool hover shadow and scale effect for nodes - but now the click through is gone.

[BubbaLovesCheese]

So I created a real cool effect for Nodes.

As you hover over the Nodes, a drop shadow appears, and the Node expands.

This is the code.

/* Create box shadow and scale node effect on hover */

.template-forum_list .block-container .node {
  /* For positioning the pseudo-element */
    position: relative;
    box-shadow: 1px 1px 1px 0px rgba(99, 99, 99, 0.6);
}

/* Create the hidden pseudo-element */

.template-forum_list .block-container .node::before {
  /* Position the pseudo-element. */
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  /* Create the box shadow at expanded size. */
    box-shadow: 0 0 10px 4px rgba(99, 99, 99, 0.6);
  /* Hidden by default. */
    opacity: 0;
    transition: opacity 500ms;
}

/* Show the pseudo-element on hover */

.template-forum_list .block-container .node:hover::before {
  opacity: 1;
}

/* Scale up the box */

.template-forum_list .block-container .node:hover {
  transform: scale(1.02, 1.02);
}

This is a live DEMO HERE

The issue is, when these effects are applied, you can no longer click on the Nodes to get to the forum posts!

Would anyone know where I went wrong, what I'm missing, or if what I'm trying is even possible?

Thanks!

 

[BubbaLovesCheese]

I found the solution. I added z-index: -1; to the .template-forum_list .block-container .node::before {.

P.S. I wish there was a way to delete your own thread after you post!