How to make a:hover work with content wrappers?

user_17680844 0
Viewed 34

I'm having trouble with content wrappers as they are preventing my hover interactions from working. The goal is to get the div with class='card' to have an interaction when the mouse goes over it.

.card {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  overflow: hidden;
}

.card>div {
  height: 100%;
  width: 100%;
}

.card .foreground {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateX(100%);
  background-color: blue;
  transition: .5s ease;
}

.card:hover .foreground {
  transform: translateX(0);
}
<div class='card'>
  <div class='foreground'> </div>
  <div class='background'> </div>
</div>

All info here: https://codepen.io/kaijinny/pen/poWezRL

wrapper hover css html
1 Answers

Since the element with the class .section-bubble1 has a z-index: -1, it is not available for hover (because it is "under" the layer). You need to reconsider the order of the z-index.

user_171828780
Related