CSS - on hover image half slide up

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>