show text on hover

[jenochs 0]

I am trying to make the text on the home screen hidden until a user hovers over the card. I have hidden the text but it does not show when hovering. Also, the text is only hidden when the webpage window is almost the full width of the monitor. If I resize the window, the text reappears as it normally would. This happens on a MacBook Pro. I have not tested it on my PC yet.

 

This is the code that I am using.

div.cardTextCentered {display: none;}
div.cardTextCentered:hover {display: block;}

Any help would be greatly appreciated.

[Happy2Play 9441]

Something like this

div.cardTextCentered {display: none;}
div.cardScalable:hover + div.cardTextCentered {display: block;}

or

div.cardTextCentered {visibility: hidden;}
div.cardScalable:hover + div.cardTextCentered {visibility: visible;}

Probably the latter as it maintains the placeholders so the entire row is not moving.

https://www.w3schools.com/cssref/sel_hover.asp

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover2

Edited November 12, 2020 by Happy2Play

[jenochs 0]

Perfect! Thanks for your assistance.

[Prism16 1]

Hi all, I actually expanded on the above and added in some values in order to animate the text appearance, thought i would post here as this was the post i found the idea on in the first place..

div.cardTextCentered {visibility: hidden; opacity:0; transition:visibility 0.5s linear, opacity 0.5s linear;}
div.cardScalable:hover + div.cardTextCentered {visibility: visible; opacity:1; }