Kevin Powell - Community•11mo ago

CSS: Hide team card's inner text elements by default; show it while hovering on the outer element

Anybody CSS Pro here? 🙂 I need your help guys! /* Hide card without Hovering */ This is a member card - I want to make it hidden by default to just show the photo of the person .team-member-row .wp-block-kadence-column .kt-inside-inner-col p, .team-member-row .wp-block-kadence-column .kt-inside-inner-col div { visibility: hidden; } And while hovering the persons name, position and linkedIn icon should appear .team-member-row .wp-block-kadence-column .kt-inside-inner-col:hover~p, .team-member-row .wp-block-kadence-column .kt-inside-inner-col:hover~div { visibility: visible; } You can see the page here -> https://getidle.io/#team

IDLE Telecommunications Consulting GmbH

Die ersten b2b Consultants mit allen IT-Leistungen aus einer Hand -...

…um mehr Konzentration für dein Kerngeschäft zu haben

2 Replies

Zoë•11mo ago

You have ~ in the hovers, you want to remove them. ~ selects siblings after the element but they're children, like what the first set of styles says

MarkBoots•11mo ago

.outer-element:not(:hover, :focus) > * {
  opacity: 0;
}

.outer-element:not(:hover, :focus) > * {
  opacity: 0;
}

if the outer-element is not hovered or focused then set the opacity of all direct childs to 0

Gaming

Programming

CSS: Hide team card's inner text elements by default; show it while hovering on the outer element