CSS Display separate text on Hover or Click on Image - html

Question

I'm trying to display a text message when the user hovers or clicks on a image. These messages will be: "Good" or "Great" different text for each image. For some reason I cannot get it to work, I can get it to work if I hovered over plain old text but not on the image. I've been pulling out my hair for 2 days now really need help with this.
<link rel='stylesheet' href='https://afeld.github.io/emoji-css/emoji.css'>
<style>
#import url("https://fonts.googleapis.com/css?family=Lato:400,700");
.rating-wrapper {
max-width: 400px;
margin: 80px auto;
background: #fff;
padding: 1em;
border-radius: 3px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}
.rating-wrapper .rating-label {
text-align: center;
font-weight: 700;
display: block;
}
.rating-wrapper .ratingItemList {
max-width: 300px;
margin: auto;
display: flex;
justify-content: space-between;
padding: 1em 0;
}
.rating-wrapper input.rating {
display: none;
}
.rating-wrapper label.rating {
padding: 5px 3px;
font-size: 32px;
opacity: 0.7;
filter: grayscale(1);
cursor: pointer;
}
.rating-wrapper label.rating:hover {
filter: grayscale(0.84);
transform: scale(1.1);
transition: 100ms ease;
}
.rating-wrapper input.rating:checked + label.rating {
filter: grayscale(0);
opacity: 1;
transform: scale(1.1);
}
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
</style>
<form class="rating-wrapper">
<label class="rating-label">How helpful was this?
<div class="ratingItemList">
<input class="rating rating-4" id="rating-4-2" type="radio" value="4" name="rating"/>
<label class="rating rating-4" for="rating-4-2"><i class="em em-grinning"></i></label>
<input class="rating rating-5" id="rating-5-2" type="radio" value="5" name="rating"/>
<label class="rating rating-5" for="rating-5-2"><i class="em em-star-struck"></i></label>
</div>
</label>
<label class="myDIV">Hover over me.</label>
<div class="hide"><br>I am shown when someone hovers over the image above.</div>
</form>

Answer 1

According to the Selector Reference I don't see any way to do this with CSS only. But it can be done with Javascript.
const divShow = document.querySelector('.hide');
function showUp(){
divShow.style.display = "block";
divShow.style.color = "red";
}
function hide(){
divShow.style.display = "none";
}
#import url("https://fonts.googleapis.com/css?family=Lato:400,700");
.rating-wrapper {
max-width: 400px;
margin: 80px auto;
background: #fff;
padding: 1em;
border-radius: 3px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}
.rating-wrapper .rating-label {
text-align: center;
font-weight: 700;
display: block;
position: relative;
}
.rating-wrapper .ratingItemList {
max-width: 300px;
margin: auto;
display: flex;
justify-content: space-between;
padding: 1em 0;
}
.rating-wrapper input.rating {
display: none;
}
.rating-wrapper label.rating {
padding: 5px 3px;
font-size: 32px;
opacity: 0.7;
filter: grayscale(1);
cursor: pointer;
}
.rating-wrapper label.rating:hover {
filter: grayscale(0.84);
transform: scale(1.1);
transition: 100ms ease;
}
.rating-wrapper input.rating:checked + label.rating {
filter: grayscale(0);
opacity: 1;
transform: scale(1.1);
}
.hide {
display: none;
}
<link rel='stylesheet' href='https://afeld.github.io/emoji-css/emoji.css'>
<form class="rating-wrapper">
<label class="rating-label">How helpful was this?
<div class="ratingItemList">
<input class="rating rating-4" id="rating-4-2" type="radio" value="4" name="rating"/>
<label onmouseover="showUp()" onmouseleave="hide()" class="rating rating-4" for="rating-4-2"><i class="em em-grinning"></i>
</label>
<input class="rating rating-5" id="rating-5-2" type="radio" value="5" name="rating"/>
<label onmouseover="showUp()" onmouseleave="hide()" class="rating rating-5" for="rating-5-2"><i class="em em-star-struck"></i></labe>
</div>
</label>
<label onmouseover="showUp()" onmouseleave="hide()" class="myDIV">Hello world</label>
<div class="hide"><br>I am shown when someone hovers over the image above.</div>
</form>