skyleguy skyleguy - 1 year ago 47
CSS Question

make certain info appear when a certain image is hovered

I have the following css and HTML:

<div class="container">
<img class="imag one" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/glenn-e1464714419457.jpg">
<img class="imag two" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/Dave-974x1024.jpg">
<p class="name glenn">Glenn</p>
<p class="title glenn">Part Owner/Senior Inspector</p>
<p class="bio glenn">I am Glenn hear me roar!</p></img>
<p class="name dave">Dave</p>
<p class="title dave">Part Owner/ Manager</p>
<p class="bio dave">I am Dave hear me roar!</p>
</div>

.container {
height: 500px;
width: 100%;
border: 2px solid black;
}

.imag {
height: 100px;
width: 100px;
float: left;
}

.name {
position: absolute;
top: 50vh;
}

.title {
position: absolute;
top: 50vh;
left: 25vw;
}

.bio {
position: absolute;
top: 50vh;
left: 50vw;
}

.glenn {
opacity: 0;
}

.dave {
opacity: 0;
}

.one:hover .glenn {
opacity: 1 !important;
}

.one:hover {
opacity: 0.5;
}


I would like for when hovering glenn's image (.one) then all the stuff with the class of glenn should appear, and when hovering dave's picture (.two) all of the stuff with .dave should appear. How can i do this with this configuration?

Answer Source

you are looking for the ~General sibling combinator selector

<div class="container"> <img class="imag one" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/glenn-e1464714419457.jpg"> <img class="imag two" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/Dave-974x1024.jpg"> <p class="name glenn">Glenn</p> <p class="title glenn">Part Owner/Senior Inspector</p> <p class="bio glenn">I am Glenn hear me roar!</p></img> <p class="name dave">Dave</p> <p class="title dave">Part Owner/ Manager</p> <p class="bio dave">I am Dave hear me roar!</p> </div> .container {
  height: 500px;
  width: 100%;
  border: 2px solid black;
}
.imag {
  height: 100px;
  width: 100px;
  float: left;
}
.name {
  position: absolute;
  top: 50vh;
}
.title {
  position: absolute;
  top: 50vh;
  left: 25vw;
}
.bio {
  position: absolute;
  top: 50vh;
  left: 50vw;
}
.glenn {
  opacity: 0;
}
.dave {
  opacity: 0;
}
.one:hover ~ .glenn {
  opacity: 1 !important;
}
.one:hover {
  opacity: 0.5;
}
.two:hover ~ .dave {
  opacity: 1 !important;
}
.two:hover {
  opacity: 0.5;
}
<div class="container">
  <img class="imag one" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/glenn-e1464714419457.jpg">
  <img class="imag two" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/Dave-974x1024.jpg">
  <p class="name glenn">Glenn</p>
  <p class="title glenn">Part Owner/Senior Inspector</p>
  <p class="bio glenn">I am Glenn hear me roar!</p>
  <p class="name dave">Dave</p>
  <p class="title dave">Part Owner/ Manager</p>
  <p class="bio dave">I am Dave hear me roar!</p>
</div>