jenochs 0 Posted November 12, 2020 Share Posted November 12, 2020 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. Link to comment Share on other sites More sharing options...
Solution Happy2Play 8289 Posted November 12, 2020 Solution Share Posted November 12, 2020 (edited) 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 Link to comment Share on other sites More sharing options...
jenochs 0 Posted November 12, 2020 Author Share Posted November 12, 2020 Perfect! Thanks for your assistance. Link to comment Share on other sites More sharing options...
Prism16 1 Posted December 5, 2020 Share Posted December 5, 2020 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; } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now