html - Make one class appear on another class hover -

hello trying make full-width bar of images, , when 1 image hovered, want text image appear below bar. far have following html , css:

<div class="everything-container">   <div class="pic-container">     <img class="pic one" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/glenn-e1464714419457.jpg">   </div>   <div class="info-container">     <div class="name">       <p class="glenn name">glenn</p>     </div>     <div class="title">       <p class="glenn title">part owner/ senior inspector</p>     </div>     <div class="bio">       <p class="glenn bio">my name glenn , amazing.</p>     </div>   </div> </div> 

.everything-container {   height: 500px;   width: 100%;   border: 2px solid black; } .pic-container {   width: 100%;   height: 100px;   border: 2px solid green; } .info-container {   width: 100%;   height: 400px;   border: 2px solid red; } .name {   height: 400px;   width: 25%;   border: 2px solid yellow;   float: left;   text-align: center;   font-size: 120%;   font-family: "open sans";   font-weight: bold;   color: black; } .title {   height: 400px;   width: 20%;   border: 2px solid blue;   float: left;   text-align: center;   font-size: 90%;   text-decoration: italic;   color: grey;   font-family: "open sans"; } .bio {   height: 400px;   width: 55%;   border: 2px solid orange;   float: left;   font-size: 100%;   text-align: center;   color: black;   font-family: "open sans"; } .pic {   height: 100px;   width: 100px;   float: left; } 

i gave 1 of images class of "one" , when hover want class of "glenn" appear. using .one:hover .glenn { stuff } did not work. possible do? thank you!

i'm afraid closest can without javascript:

<div class="everything one">   <div class="image">    <img src="..." />   </div>   <div class="info">     name     title     details   </div> </div> 

css:

.everything .info {  opacity: 0; }  .everything:hover .info {  opacity: 1; }