Translation of text
-
How can the text be furthest 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; }
-
It's possible through transparency.opacityas the style is numerical between 0 and 1, the current has an intermediate number with a floating point, such as 0.5, which means a smooth transition can be applied to it (transition)
A display has no intermediate values, so transition Not applicable
.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>