Dash Sliding-Middle-out on top image

Question

I have an image and at Hover, I want to present a dash at the top of the image growing from the middle out. example here (below "our Programs"): http://www.templatemonster.com/demo/58536.html

I’m using the code below, but I can’t put the dash at the top, and it doesn’t come out at the bottom.

.sliding-middle-out {
    display: inline-block;
    position: relative;
    padding-bottom: 3px;
}
.sliding-middle-out:after {
    content: '';
    display: block;
    margin: auto;
    height: 3px;
    width: 0px;
    background: transparent;
    transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
    width: 100%;
    background: blue;
}

Answer 1

.wrapper {
  width: 150px;
  position: relative;
  float: left;
}
img {
  width: 100%; 
}
.bar {
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease;
  width: 0;
  background-color: red;
  right: 0;
  left: 0;
  top: 0;
  margin: auto;
  position: absolute;
  height: 0;
}
.wrapper:hover .bar {
  width: 100%;
  height: 6px;
}

<div class="wrapper">
  <div class="bar"></div>
  <img src="http://ld-wp.template-help.com/wordpress_58536/wp-content/uploads/2016/05/home-programs-img1.jpg">
</div>
<div class="wrapper">
  <div class="bar"></div>
  <img src="http://ld-wp.template-help.com/wordpress_58536/wp-content/uploads/2016/05/home-programs-img3.jpg">
</div>
<div class="wrapper">
  <div class="bar"></div>
  <img src="http://ld-wp.template-help.com/wordpress_58536/wp-content/uploads/2016/05/home-programs-img4.jpg">
</div>