skyleguy skyleguy - 4 months ago 8
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

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>