How to establish a smooth appearance of the text through hover without jquery?

<div class='first_block'> <div class='second_block'>Текст</div> </div> 
 .first_block { display: inline-block; width: 300px; height: 200px; border: 1px red solid; padding: 10px; } .second_block { display: none; } .first_block:hover .second_block { display: block; }
  • Look at the css3 animate property - Boris Runs
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

It is possible through opacity , since the style has a numeric value from 0 to 1, that is, it has an intermediate floating-point number, for example, 0.5, which means you can apply a smooth transition to it ( transition )

And the display has no intermediate values, so the transition is not applicable to it.

 .first_block { display: inline-block; width: 300px; height: 100px; border: 1px red solid; padding: 10px; } .second_block { opacity: 0; transition: .2s; } .first_block:hover .second_block { opacity: 1; transition: .2s; } 
 <div class='first_block'> <div class='second_block'>Текст</div> </div>

  • Don't forget about cross-browsering (see my answer) - Victor Evlampyev
  • one
    @Viktor Evlampyev, now almost everything works on webkit. And in chrome transition and in the opera. ms is it IE? You can score on it. As with the Firefoss I do not know yet, but there, it seems, it also works without -moz- . Check someone. And also All already nobody writes, either nothing, or opacity - Mr. Black
  • Thanks for the advice :). - l1sZ

It helps me with animation in css3:

 webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;

Where 0.2s is animation time

  • Already tried, for the text, the transition property does not work. See what css3 animate. - l1sZ
  • for the webkit prefix also need a hyphen - alenkins
  • @ l1sZ, what does it mean for text not working ? worth adding to the question. exactly how they tried to use it - Grundy