Как сделать плавный hover на класс?

Question

[Nikita Shchypylov]

Всем привет

Есть такой 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;

Сейчас плавности нет, не знаю почему. Есть идеи?

Answer 1

[Антон Рейтаровский]

Js или css анимация

Answer 2

[Валерий Зинченко]

И в hover тоже укажи transition, может прокатит) или попробуй
transition-duration: 0.2s;