transition: 1s ease; not working with background color change

Question

I am trying to get my image to change color when I hover over it, I managed to get this working. However, the transition is not working.

I applied "transition: 1s ease;" to all the CSS elements related to this picture, however I cannot get transition working, the color just changes immediately instead of smoothly.

Can you please help and advise what I am doing incorrectly and perhaps provide a solution?

Fiddle

Thanks a lot in advance.

.img_effect2 {
transition: 1s ease;
position: relative;
}

.overlay {
  position: relative;
  transition: 1s ease;
}

.overlay:before{
  position: absolute;
  content:" ";
  top:0;
  left:0;
  width:100%;
  height:100%;
  display: none;
  z-index:0;
  transition: 1s ease;
}

.overlay:hover:before{
  display: block;
  transition: 1s ease;
}

.red:before {
  background-color: rgba(255,0,0,0.5);
  transition: 1s ease;
}

.featured_image {
overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 300px;
    width: 500px;
    cursor: pointer;
    transition: 1s ease;
}

.featured_image:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  background-color: rgba(0, 0, 0, 0.15);
  transition: 1s ease;
}

.featured_title{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: auto;
  margin-top: 100px;
  position: relative;
  z-index: 1;
  font-size: 5rem;
  color: #fff;
  text-align: center;
  width: 70%;
background-color: rgba(0, 0, 0, 0.35)
}

<div class="featured_image img_effect2 overlay red" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg">
  <p class="featured_title">Title
    </p>
   </div>