CSS - on hover image half slide up [closed]

Question

Want same result as code below but instead of background want hover on image

On image hover want to slide up with content

The code

h1 {
  margin: 0
}
.box {
  height: 200px;
  width: 300px;
  overflow: hidden;
  border: 1px solid red;
  background: #ff0;
}
.hid-box {
  top: 100%;
  position: relative;
  transition: all .3s ease-out;
  background: #428bca;
  height: 100%;
}

.box:hover > .hid-box{
  top: 80px;
}

<div class="box">
  <!-- <img src="pic1.png"> -->
    <div class="hid-box">
      <h1>CSS3 slide up</h1>
      <p>This is a quick demo of slide-up effect using CSS animation when hover the box. No JS required!</p>
    </div>
</div>

Tried With image tag but it is not working, the image don't has fix size <div class="box"> will not work.

h1 {
  margin: 0
}

.box {
  height: 200px;
  width: 300px;
  overflow: hidden;
  border: 1px solid red;
  background: #ff0;
}

.hid-box {
  top: 100%;
  position: relative;
  transition: all .3s ease-out;
  background: #428bca;
  height: 100%;
}

.box:hover>.hid-box {
  top: 80px;
}

.box img {
  position: absolute
}

<div class="box">
    <img src="https://dummyimage.com/124x124/000/fff.png&text=pic1">
    <div class="hid-box">
      <h1>CSS3 slide up</h1>
      <p>This is a quick demo of slide-up effect using CSS animation when hover the box. No JS required!</p>
    </div>
</div>

Finally achived wanted result

.container {
    position: absolute;
  }
  
  .image {
    display: block;
  }
  
  .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: green;
    color: white;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
  }
  
  .container:hover .overlay {
    height: 50%;
  }

 <div class="container">
    <img src="https://dummyimage.com/120x120/000/fff.png&text=120x120" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>

Answer 1

Do you need to size the box to the image's size ?

if yes, the box needs to shrink on it and img to remain in the flow, then the text has to be removed from the flow via position:absolute.

make the box a relative box, so coordonates for absolute child will use the box for reference....

See the comments inside CSS to find out the purpose of chosen rules ;)

h1 {
  margin: 0
}

.box {
/* size the box to the image's size */
  width:max-content;
  height:max-content;
  
  /* hide overflowing text box */
  overflow: hidden;
  /* make it the reference for absolute positionned children */
  position:relative;
  
  /* your style */
  border: 1px solid red;
  background: #ff0;
}

.hid-box {
  position: absolute;/* take it off the flow, image is doing the sizing */
  bottom:0;/* defaut coordonate expected */
  top:100%;/* pushed off sight */
  margin-top:auto; /* keep it as close as possible to bottom */
 
 /* size it to the box */
  width: 100%; 
  height:max-content;/* do not let it grow bigger than its content */
  max-height:100%;/* but also do not let it grow taller than its parent box */
  overflow:auto;/*, let it scroll if contents overflows text box */
  
  /* your style */  
  transition: all .3s ease-out;
  background: #428bca;
}

.box:hover>.hid-box {
  top:0;/* bring it back into view */
 
}

.box img {
  display:block;/* remove that white space below */
}

/* demo purpose */
body>div {float:left;margin:1em;
}

<div class="box">
    <img src="https://dummyimage.com/124x124/000/fff.png&text=pic1">
    <div class="hid-box">
      <h1>CSS3 slide up</h1>
      <p>This is a quick demo of slide-up effect using CSS animation when hover the box. No JS required!</p>
    </div>
</div>

<div class="box">
    <img src="https://dummyimage.com/200x224/000/fff.png&text=pic1">
    <div class="hid-box">
      <h1>CSS3 slide up</h1>
      <p>This is a quick demo of slide-up effect using CSS animation when hover the box. No JS required!</p>
    </div>
</div>
Then , use <b>figure</b> and <b>figcaption</b> tags instead <b>div</b>  ;)
<figure class="box">
    <img src="https://dummyimage.com/500x225/0f0/fff.png&text=figure_figcaption">
    <figcaption class="hid-box">
      <h1>CSS3 slide up</h1>
      <p>This is a quick demo of slide-up effect using CSS animation when hover the box. No JS required!</p>
    </figcaption>
</figure>