Sliding-middle-out trait on top of image

Question

Sliding-middle-out trait on top of image

Navigation

#1 by (2 votes)

0

I have an image and in the hover, I want to present a trace at the top of the image to grow from the middle out. example here (below "our programs"): link

I'm using the code below, but I can not put the trace on top, and it does not leave 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;
}

html css3

asked by anonymous 04.08.2016 / 13:44

1 answer

Change image when selecting radio on form How to add item in API [closed]

score 2 · Accepted Answer

.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><divclass="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><divclass="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>