How to make clickable what's behind hover? - html

Question

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 make clickable what lies behind the globe?
view
<div class="image-container">
<span class="glyphicon glyphicon-globe" style="font-size: 7em; color: white; text-align: center; width: 100%; background-color: #446CB3; border-radius: 4px; padding: 19%;" id="image-foreground"></span>
<div class="text-wrapper">
<div class="like-button">
<%= link_to like_challenge_path(:id => #challenge.id), class: "btn", method: :post do %>
<span class='glyphicon glyphicon-thumbs-up'></span> Like
<% end %>
</div>
<div class="text-background">
<%= render "comments/form" %>
</div>
</div>
</div>
css
.image-container {
position: relative;
height: auto;
#image-foreground {
position: absolute;
z-index: 2;
opacity: 1;
&:hover {
opacity: 0;
}
}
}
.text-wrapper {
opacity: 1;
}
no hover
hover

Answer 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.

Answer 2

you could do on hover display the blue screen as none.
.image-container:hover {
display: none;
}
it that what you wanted ?

Answer 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
}
}