There is a link suggesting that a block pops up.

Here is the 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">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias debitis eaque est eum harum </p> </div> </a>

and scss:

 .outside { background: url("../img/outside.png") no-repeat scroll; width: 464px; height: 668px; position: relative; display: block; @include transition(all 0.2s ); &:hover { .outside_hover { display: block; margin: 0 auto; background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0; @include size(464px, 668px); position: relative; } } }

I want the .outside_hover block .outside_hover pop up smoothly and everything in it, but now the transition not working.

  • You do not have a transition to .outside_hover . What do you expect? .outside_hover are no default values ​​for background on .outside_hover either. What to change smoothly something? Specify a complete example on which the problem is reproduced completely, and not a piece of code with include . - VenZell
  • Yes, indeed, an example is like a torn piece of code. For a smooth swim, use transform: translate (...); The transition does not work for display: none / block; - HamSter

0