Why does the transition in the opposite direction not work?

Question

css

Hey! I can’t figure out what I’m doing wrong, I set transition: all 0.2s easy-in-out for hover links. For simple links, where just changing the color works great. But for the background on hover, it's great, but when you remove the cursor from the link, the style for the hover state (background or opacity) disappears abruptly, I googled a bunch of the simplest examples - everything works there for both hover and "retraction". But in my examples it doesn’t work (Tell me what I’m doing wrong ??

.b-examples-project-block_item-title {
  height: 80px;
  width: 380px;
  opacity: 0.8;
  background: #FFFFFF;
  position: absolute;
  bottom: 0;
  line-height: 74px;
  left: 0;
  padding: 0 0 0 16px;
}
.b-examples-project-block_link:hover .b-examples-project-block_item-title {
  opacity: 1;
  -webkit-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}

Answer 1

Remove the transition from the hover and write to the class above. Like this:
.b-examples-project-block_item-title {
height: 80px;
width: 380px
opacity: 0.8
background: #FFFFFF;
position: absolute;
bottom: 0;
line-height: 74px;
left: 0;
padding: 0 0 0 16px;
-webkit-transition: opacity 1s ease-out;
transition: opacity 1s ease-out;
}
.b-examples-project-block_link:hover .b-examples-project-block_item-title {
opacity: 1;
}