How could i display multiple elements when hovering another

Question

I am trying to figure out how i can set display:block; on all the p tags and on the overlay div when im hovering my img tag. Is this possible only with CSS or would i have to figure something out with javascript. Or should i change the way i approach this? All help is appreciated thanks.

.staff-pic-contain {
  height: 250px;
  width: 250px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.staff-pic {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

p {
  font-weight: bold;
  position: absolute;
  color: white;
  display: none;
}

.name {
  margin-top: 15%;
}

.number {
  margin-top: 25%;
}

.overlay {
  background-color: red;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  opacity: 0.75;
  display: none;
}

img:hover {
  cursor: pointer;
}

<div class="staff-pic-contain">
  <img class="staff-pic" src="https://picsum.photos/g/200/300" alt="">
  <p class="position"> CEO </p>
  <p class="name"> NAME </p>
  <p class="number"> 123123 </p>
  <div class="overlay"></div>
</div>

should be possible with :hover pseudo class, read it online, javascript is also good and browser safe option — Vitaliy Terziev, Apr 21 '18 at 09:55

Ori Drori · Answer 1 · 2018-04-21T10:04:40.560

2

Use CSS to display the p and .overlay when hovering the container:

.staff-pic-contain:hover p, .staff-pic-contain:hover .overlay {
  display: block;
}

To limit the hover area to the image, add border-radius: 50% to the container.

Demo:

.staff-pic-contain {
  height: 250px;
  width: 250px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.staff-pic {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

p {
  font-weight: bold;
  position: absolute;
  color: white;
  display: none;
}

.name {
  margin-top: 15%;
}

.number {
  margin-top: 25%;
}

.overlay {
  background-color: red;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  opacity: 0.75;
  display: none;
}

img:hover {
  cursor: pointer;
}

.staff-pic-contain:hover p, .staff-pic-contain:hover .overlay {
  display: block;
}

<div class="staff-pic-contain">
  <img class="staff-pic" src="https://picsum.photos/g/200/300" alt="">
  <p class="position"> CEO </p>
  <p class="name"> NAME </p>
  <p class="number"> 123123 </p>
  <div class="overlay"></div>
</div>

edited Apr 21 '18 at 10:04

answered Apr 21 '18 at 09:54

Ori Drori

183,571
29
224
209

1

Yes, `~` will not work well in this case. – dfsq Apr 21 '18 at 09:57
2

I wonder why take the time answering such trivial questions when it's obvious that the OP is lazy enough not to google it and spent half hour.. – Vitaliy Terziev Apr 21 '18 at 10:00
@OriDrori This i already knew, what im trying not to do is make it possible to hover outside the image circle. As you see the overlay and text appears when hovering just outside the image circle. – user9294038 Apr 21 '18 at 10:00
2

@user9294038 add: .staff-pic-contain {border-radius: 50%} – VXp Apr 21 '18 at 10:02
1

@user9294038 this info need to be clear in your question, we are not mind reader ... – Temani Afif Apr 21 '18 at 10:05
1

@user9294038 - this was not apparent from your question. VXp's idea is the way to go - see updated answer. – Ori Drori Apr 21 '18 at 10:06

How could i display multiple elements when hovering another

1 Answers1