Create a new stacking context on hover

Question

I have a scrollable list of elements, each element of the list has a bouncing animation on click (I simplified the below example with an enlarging transition on hover).

If the parent container isn't scrollable, there are no problems since overflow-x works as expected only when overflow-y is set to something different than auto or scroll, as stated in this question.

Desired behaviour

When the animation exceeds the boundaries of the scrollable container, it should create a new stacking context and overlap the y-axis scrollbar. It should not show a horizontal scrollbar.

What I tried so far

So far I tried:

Using position: absolute on hover. It doesn't work because we are inside a scrollable container
Applying an intermediate div with overflow-x: visible. It doesn't work for the same reason

I understood that I can't solve this problem if I won't be able to create a new stacking context on the fly, when the user hovers an item of the list.

Here is an example of the problem:

.scrollable-div {
  width: 250px;
  height: 400px;
  overflow-y: auto;
  border: solid 1px gray;
}

.grow-on-hover {
  width: 90%;
  height: 120px;
  margin: 10px auto;
  background-color: royalblue;
  transition: transform 0.5s ease-in-out;
}
.grow-on-hover:nth-child(odd) {
  background-color: gold;
}

.grow-on-hover:hover {
  transform: scaleX(1.5);
}

<div class="scrollable-div">
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
</div>

Thank you.

Edit:

What should happen on hover is the following effect:

you can approximate this using position:fixed : https://jsfiddle.net/j6r0mx7a/ but it won't be good for all the elements — Temani Afif, Oct 28 '19 at 11:44

Awais · Answer 1 · 2019-10-28T12:19:23.213

HTML

<div class="scrollable-div">
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
</div>

CSS

.scrollable-div {
  width: 250px;
  height: 400px;
  overflow-y: auto;
  border: solid 1px gray;
}

.grow-on-hover {
  width: 90%;
  height: 120px;
  margin: 10px auto;
  background-color: royalblue;
  transition: transform 0.5s ease-in-out;
}
.grow-on-hover:nth-child(odd) {
  background-color: gold;
}

.grow-on-hover:hover {

    transition: all .3s;
}
.grow-on-hover::before {
    content: '';
    background: royalblue;
    width: 250px;
    height: 120px;
    position: absolute;
    left: 9px;
    right: 0;
 opacity: 0;
    visibility: hidden;
}
.grow-on-hover:nth-child(odd)::before {
  background-color: gold;
  content: '';
}

.grow-on-hover:hover::before{
  opacity: 1;
    visibility: visible;
    transition: all .3s;
}

This will hide the horizontal scrollbar, but the item won't pop out the scrollable div. I want the item to cover the scrollbar on hover — Christian Vincenzo Traina, Oct 28 '19 at 11:29

score -1 · Answer 2 · answered Oct 31 '19 at 12:34

You can use this code

body {
  margin: 0;
}

.scrollable-div {
  width: 250px;
  height: 400px;
  overflow-y: auto;
  padding: 10px;
  border: solid 1px gray;
}

.grow-on-hover {
  width: 210px;
  height: 120px;
  margin: 0 auto 10px;
  background-color: royalblue;
  transition: transform 0.5s ease-in-out;
}

.grow-on-hover:nth-child(odd) {
  background-color: gold;
}

.grow-on-hover:hover {
  transform: scaleX(1.5);
  position: fixed;
  width: 178px;
}

.grow-on-hover:hover+div {
  margin-top: 140px;
}

<div class="scrollable-div">
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
  <div class="grow-on-hover"></div>
</div>

Sorry but it's not working in the way I described in the question — Christian Vincenzo Traina, Oct 31 '19 at 13:26

Create a new stacking context on hover

2 Answers2