How to display additional information for hovered?

Please tell me how to implement the display of additional information when the cursor is on the block. I understand using javascript to implement this?
joxi.ru/V2VaNzMu06o19m
July 2nd 19 at 18:55
2 answers
July 2nd 19 at 18:57
Solution
JS or pure CSS, if the hidden unit is nested in the parent or nearby.

The point is that extra information is hidden display:none
When you hover it shows up.

codepen.io/anon/pen/pNvpWq (then it is to be opened to the side, but does not change the fact)
how do you think what is better, JS or CSS? on css I knew about, but to smoothly output it's probably in the JS? thank you - Loy_Cruickshank commented on July 2nd 19 at 19:00
: probably smoothly through opacity, but not sure that will be fine.
What is better? I like CSS more than JS, so if you can do without JS, then fine. And so each for himself and for the task choose. - Elmer.Upt commented on July 2nd 19 at 19:03
: thanks again, I will understand, beginner only) - Loy_Cruickshank commented on July 2nd 19 at 19:06
: another question and opacity 'is the opacity, and with a smooth shift immediately without script not do you think? - Loy_Cruickshank commented on July 2nd 19 at 19:09
if the shift is a change in the height, it can not do - Elmer.Upt commented on July 2nd 19 at 19:12
July 2nd 19 at 18:59
As rightly said solution with pure CSS, work quite well. But we should remember that this action should occur not only on :hover, but also on :focus (there are people working from the keyboard). Respectively to the element, that hung on hover and focus, most likely will need to add tabindex = 0 to give these people the ability to navigate through your items using the tab. Example with smooth appearance for more information: codepen.io/sfi0zy/pen/KNwZGE?editors=1100

Find more questions by tags JavaScriptHTML