How to put a transition .5s ease

Question

I have this image that on hover adds a tint and puts text over it. I want to add transition: .5s ease; but for some reason it won't work. Heres a jsfiddle Any idea how to do it, I have tried all that I can think and I am stumped and don't know what to do.

Any help appreciated

Thanks

Code

.col-sm-6 {
  min-height: 500px;
  background: lightgrey;
  text-align: center;
}

.image-wrap {
  display: inline-block;
  max-width: 100%;
  position: relative;
}

.image-wrap .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  opacity: 1;
  transition: display .5s ease;
  display: none;
}

.image-wrap:hover .overlay {
  display: block;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 0, 255, 0.5);
}

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <a href="#" class="image-wrap">
        <img class="img-responsive" src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" />
        <div class="overlay red">
          <h3>Image Heading</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, tempore?</p>
        </div>
      </a>
      <a href="#" class="image-wrap">
        <img class="img-responsive" src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" />
        <div class="overlay blue">
          <h3>Image Heading</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, tempore?</p>
        </div>
      </a>
    </div>
  </div>
</div>

Possible duplicate of [Transitions on the display: property](https://stackoverflow.com/questions/3331353/transitions-on-the-display-property) — chazsolo, Jul 10 '17 at 20:48
you set opacity rule .. use it ! It takes animation/transition steps https://jsfiddle.net/4gcqLm3y/1/ — G-Cyrillus, Jul 10 '17 at 20:53

score 3 · Accepted Answer · answered Jul 10 '17 at 21:00

Some, minor changes are needed. Basically you cannot animate display, therefore as a workaround you can animate the opacity, your overlay will always have an opacity of 0 and when you hover the opacity will change to 1, with the desired animation like:

.image-wrap .overlay {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  color:white;
  opacity: 0;
  transition: opacity .5s ease;
}

.image-wrap:hover .overlay {
  opacity: 1;
}

How to put a transition .5s ease

1 Answers1