Force child element visible outside an overflow:hidden parent

Question

Only solution I found was to put a position: fixed on element I want to fully see. Any other options? (I dont want to 'cool-image' fixed). Help or hint would be awesome. Also, if anyone can explain solution - that would be even better

Fiddle: JSFiddle

HTML

<div class="img-cont">
  <div id="slider">
    <ul>
      <li class="slide">
        <img src="http://www.sportspearl.com/wp-content/uploads/2017/05/football-150x150.png" >
        <div class="cool-image"></div>
      </li>
    </ul>
  </div>
</div>

CSS

.img-cont{
    height: 270px;
    position: relative;
}
#slider {
    position: relative;
    background: green;
    overflow: hidden;
    width: 440px;
    height: 200px;
}
#slider ul{
    position: relative;
    margin: 0;
    padding: 0;
}
#slider ul li {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 440px;
    height: 270px;
    text-align: center;
    line-height: 300px;
}
div.cool-image{
    background-color: white;
    position: absolute;
    border: 5px solid #EEEEEE;
    width: 650px;
    height: 350px;
    z-index: 1;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Basketball.png/170px-Basketball.png);
    margin-left: -40px; /* Just to product situation */

    display: inline-block;
}

Answer 1

Unfortunately, you can't. The child element is only capable of changing within the parents region when the position is not set to fixed or absolute.

If you don't want to make the child fixed, you could try position:absolute; and set the parent to position: relative;

Like this...

.slide img {
  position: absolute;
  z-index: 2;
}
.slide {
  position: relative;
}

Or you could try to only hide the overflow on 1 direction. Like overflow-y:hidden; Or overflow-x: hidden;