CSS hover effect to modify another element is not working - html

Question

I am trying to get a <p> element to appear upon hovering over an image. As I have it, nothing happens when I hover over the image.
Any idea what I'm doing wrong?
img {
height: 400px;
width: 400px;
position: relative;
}
p {
position: absolute;
color: #b6a9a9;
background-color: rgb(5, 5, 5);
bottom: 50%;
left: 1em;
opacity: .68;
transition: .5s ease-in;
transform: scale(1);
height: 25px;
width: 25%;
}
img:hover .stuff p {
transform: scale(2);
transform-origin: center;
}
<img src="image.jpg">
<div class="stuff">
<p>here's some text that will go on top of ths image ... I hope...</p>
</div>

Answer 1

You are almost there, you just need to add the + selector to the css definition
The + sign selector is used to select the elements that are placed immediately after the specified element but not inside.
So: img:hover + .stuff p, means: when hover over img, select it's "brother" with class .stuff and then select the p that is inside.
img {
height: 400px;
width: 400px;
position: relative;
}
p {
position: absolute;
color: #b6a9a9;
background-color: rgb(5, 5, 5);
bottom: 50%;
left: 1em;
opacity: .68;
transition: .5s ease-in;
transform: scale(1);
height: 25px;
width: 25%;
}
img:hover + .stuff p {
transform: scale(2);
transform-origin: center;
}
<img src="https://via.placeholder.com/400">
<div class="stuff">
<p>here's some text that will go on top of ths image ... I hope...</p>
</div>