How To Make Clickable What's Behind Hover?

A user hovers over glyphicon-globe image and behind it lies a like button and a comment form. When a user goes to click on the button or the comment form nothing happens. How can I

Solution 1:

There's two ways I'd try. So you know, giving an element opacity: 0; won't make it disappear completely. It is still there in position but not able to be seen. To have an element removed also use both opacity: 0; and visibility: hidden in your &:hover action.

The second way you could do it is stick with opacity: 0 but also set z-index: 0 (or any number below the z-index of the underlying layers. You have the hover working nicely but because it has a higher z-index than the underlying layers, it is still technically sitting on top of them and covering them, making them unclickable.

Hope that helps

Also a side note to the answer below, one of the answers here suggested using display: none in your hover action. display: none doesn't work for this as once an element is set to display: none, it is no longer there, not part of the DOM and so breaks the hover action.

Solution 2:

you could do on hover display the blue screen as none.

.image-container:hover {
   display: none;
}

it that what you wanted ?

Solution 3:

Here was the trick that worked:

.hide-globe {
  position: absolute;
  width: 100%;
  background-color: #ccac00;
  padding: 100px;
}

.text-wrapper {
  position: absolute; // This was essential
  opacity: 0;
  z-index: 1;
  width: 100%;
  &:hover { 
    opacity: 1;
    background-color: white; // And this helped make the image seemingly go away
  }
}