How to make a smooth hover per class?

Question

css

Hello everyone , I
have this html:

<a class="outside" href="#">
            <div class="outside_hover cf">
              <i class="wood f_left"></i>
              <span class="f_left">Каркас и фундамент</span>
              <p class="f_left">Каркас и фундамент
              </p>
            </div>
          </a>

SCSS:

.outside{
      background: url("../img/shutterstock_336992036.jpg") no-repeat scroll center;
      background-size: cover;
      height: 668px;
      position: relative;
      display: block;
      transition:background 0.2s;
      &:hover {
      .outside_hover {
        display: block;
        margin: 0 auto;
        background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
        @include size(100%, 668px);
        position: relative;

Now there is no smoothness, I do not know why. Any ideas?

Answer 1

Show better on jsfiddle, xs what you have there in the transition mixin

Answer 2

js or css animation

Answer 3

And in hover also specify transition, maybe it will work) or try
transition-duration: 0.2s;