Hovered Element to Overflow Out from an Overflow:Hidden Element CSS

Hovered element to overflow out from an overflow:hidden element css

Unfortunately, there's no (easy) way to allow a child tag to override the effects of the overflow:hidden declaration on the parent div. See: Allow specific tag to override overflow:hidden

Your only possible recourse would be with javascript: first grab the span's offset relative to the document, then move it to another location in the DOM (i.e. direct child to the body), set its position to absolute, and use the offsets you grabbed to set its left and top properties, that would locate it at the same position within the document, but now it's not contained by the div, and so no longer needs to obey overflow:hidden.

Issue with overflow:hidden/visible toggle on hover. Gif available in post

It looks like it's not because you mouse over 16, but because your mouse went between the event divs, thereby touching the 16 div between the event divs.

See the frame below where you're over an event on top of 16 just before you cross the gap:

The way that hover works is that if the mouse is over any sub-element of the element with hover, that hover CSS will continue to be used. But the moment the mouse leaves the border-box of the sub-element AND is outside of the element with over, the hover CSS will stop working.

I bet that if you're fast and accurate enough, you can get the mouse to clip over the gap between frames and keep it open. But your users might not find that useful. ;P

---

One method that might fix this would be making sure that the event divs have no space between them. That means no margins separating them.

In order to keep your current visual without having to add too much code, you can do something like the following:

...
<div class="event-wrapper"><div id="e1" class="cell-data">Event 1</div></div>
<div class="event-wrapper"><div id="e2" class="cell-data">Event 2</div></div>
...

...where the event-wrapper class looks like:

.event-wrapper {
   margin: 0px;
   padding: 0px;
}

---

Another method might be having the whole date box expand its size, but that might require some changes to how the layout works in order to keep it from messing things up.

Anyway, I hope that helps.

Hover div visible outside element

You can add overflow: hidden; to your parent

.description {
  position: absolute;
  background: black;
  width: 100%;
  height: 200px;
  bottom: -100%;
  visibility: hidden;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.box-1:hover .description {
  visibility: visible;
  bottom: 0;
}

.grid-item {
  background: rgba(6, 108, 121, 0.322);
  position: relative;
  border: 3px solid white;
  width: 100%;
  height: 200px;
  display: grid;
  cursor: pointer;
  place-items: center;
  overflow: hidden;
}

<div class="grid-item box-1">
  <h2 class="consulting">Test</h2>
  <div class="description">
    <p>Description</p>
  </div>

dropdown hover hidden in overflow-y

OP found their answer in @CBroe's comment posting about the css-tricks article which includes this exact issue.

For reference and other people having similar issues with this, I will include some code snippets and information from the article.

If we omit the position: relative from the menu items, the submenus do show up, positioned based on their closest positioned ancestor. In this case, they don’t have a positioned ancestor, so they’re positioned relative to :

ul {
  width: 200px;
  max-height: 250px;
  overflow: auto;
}

li ul {
  position: absolute;
  top: 0;
  left: 75%;
  z-index: 10;
  display: none;
}

li:hover>ul {
  display: block;
}

ul {
  margin: 1em;
  color: white;
  font-family: sans-serif;
  font-size: 16px;
}

li {
  padding: 1em;
}

li ul {
  margin: 0;
}

li ul {
  cursor: auto;
}

li ul li {
  padding: 0.5em;
}

li:nth-child(2n) {
  background: #0e8ce0;
}

li:nth-child(2n+1) {
  background: #0064b3;
}

li.parent {
  background: #00b99b;
  cursor: pointer;
}

<ul>
  <li>Abc</li>
  <li>Jkl</li>
  <li class="parent">Mno >
    <ul>
      <li>Ghi</li>
      <li>Jkl</li>
      <li class="parent">Mno >
        <ul>
          <li>Abc</li>
          <li>Def</li>
          <li>Ghi</li>
          <li>Jkl</li>
        </ul>
      </li>
      <li>Pqr</li>
      <li>Xyz</li>
    </ul>
</ul>

Overflow hidden not working on hover

Avoid positioning of the .title, and opacity.

.video_wrap{width: 232px;height: 232px;border-radius: 50%;overflow: hidden;margin: 10px;}.related {width: 232px;height: 232px;position: absolute;border-radius: 50%;overflow: hidden;z-index: -1;}.img_wrap img {height: 100%;}.title{margin: 185px 0 0;background: rgba(255,255,255,.5);line-height: 50px;text-align: center;transition: all .5s ease-in;}.title:hover{  background: #fff;}

<div class="video_wrap update"><div class="related img_wrap"><img src="http://img.youtube.com/vi/XyzYVpJGRG8/hqdefault.jpg"></div><div class="title">    rikthejm na</div></div>

---

Related Topics