How to make a smooth hover in class?

Hello

There's this html:

<a class="outside" href="#">
 <div class="outside_hover cf">
 <i class="wood f_left"></i>
 <span class="f_left">frames and Foundation</span>
 <p class="f_left">Frame and Foundation
</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.2 s;
 &: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 smooth no, I do not know why. Any ideas?
July 9th 19 at 10:59
3 answers
July 9th 19 at 11:01
Js or css animations
July 9th 19 at 11:03
Show better on jsfiddle, XS that you have there in the transition mixin
Urifactory - krista.Eichma commented on July 9th 19 at 11:06
: transition:background 0.2 s ease-in-out; - Major.Smith commented on July 9th 19 at 11:09
July 9th 19 at 11:05
And hover also show the transition, can ride) or try
transition-duration: 0.2 s;

Find more questions by tags SassCSS