How to get the Hover to overlap a div with overflow

Question

I have a certain div that holds the boxes, and this div is with overflow:hidden, I wanted to open another div with a margin so negative bottom how much top, only then the suspended div did not appear in the way expected by overflow:hidden, so I tried with js didn’t work out too well either

<div id="box"><!--div com overflow-->

     <div id="ler" class="ler">
        <div class="suspensa">Conteudo hover 01</div>
     </div>

     <div id="ler" class="ler">
        <div class="suspensa">Conteudo hover 02</div>
     </div>

<div>

#box{
   width:100%;
   width:250px;
   overflow:hidden;/*overflow*/
}

.ler{
   width:150px;
   height:250px;
   background-color:#ebebeb;
}
.ler .suspensa{display:none;}
.ler:hover .suspensa{
   display:block;
   position:absolute;
   bottom:-250px;/*margin negativa, a div suspensa nao mostra por causa do overflow na div box*/
   width:250px;
   height:150px;
   background-color:#f4f4f4;
}

so it didn’t work out, so I tried with js

$("#ler").hover(function(){
    (".suspensa").show();
});

someone knows some way to fix ?

Answer 1

Dude I only know one way to make an element "son" (is actually a pseudo-element) extrapolate the size of the element that is overflow:hidden. Even so I already say that I do not consider this a practical option, because the alignments need to be made individually...

See that I created one ::after in the .filho and in that after I used position:absolute, but to work you can not put position:relative in the element .filho this complicates the things because you lose the reference of alignment, this is the problem of this technique, but for ease I put position:relative in the container parent who is on the outside, that way the alignment of the ::after of the element .filho compositions:Absolutefica relativo a esse.fathercomposition:relative`

Seems a little confusing explanation right. but see the code for you to better understand.

OBS: Note that the alignments need to be done in the hand individually, so I said it’s not very practical and responsive... But it’s a way of extrapolating overflow:hidden...

.pai {
  position: relative;
  border: 1px solid;
  display: flex;
  box-sizing: border-box;
}
.filho {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 1px solid;
  margin: 50px;
  box-sizing: border-box;
}
.filho:hover::after {
  content: "";
  position: absolute;
  top: 35px;
  left: 35px;
  width: 130px;
  height: 130px;
  background-color: #f00;
}
.filho:nth-child(2)::after {
  left: 285px;
}

<div class="pai">
  <div class="filho">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. E
  </div>
  <div class="filho">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. E
  </div>
</div>

Answer 2

Buddy, it’s not gonna work. The div .ler is with None display, so no way to .suspensa will appear, to even appear you need to pass the mouse inside the div .ler, as it is with display None, has nothing you pass the mouse and nothing happens. You have to think of another logic. For example:

.suspensa{
    display: none;
}

.box{
    display: flex;
}

.ler {
    width: 170px;
    height: 170px;
    display: flex;
    margin: 5px;
    border: 1px solid;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.ler:hover .suspensa {
    display:block;
    padding: 20px;
    border: 1px solid;
}

<div id="box" class="box"><!--div com overflow-->

     <div id="ler" class="ler">
        <div class="suspensa">Conteudo hover 01</div>
     </div>

     <div id="ler" class="ler">
        <div class="suspensa">Conteudo hover 02</div>
     </div>

<div>