Hover Box Color and Image Opacity - html

Question

I have an image and text below it wrapped in one "a" tag. Hovering over the white box with text in it turns the box grey. Hovering over the image and it has an opacity effect.
How can I make the box turn grey and the image opacity happen at the same time when hovered over. At the moment these happen seperately. This is not a huge problem but it'd look better if they happened together.
Here's a screenshot - https://imgsafe.org/image/ef3964b27c
This is my HTML;
<div class="w3-third w3-container w3-margin-bottom">
<a href="#" style="display:block">
<img src="Images/MCR.png" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>PSB2 and COM4</b></p>
<p><b> </b></p>
</div>
</a>
</div>

Answer 1

Since your snippet is different from the image you provided, I created a simple snippet that changes the opacity of the image and changes the border color (if that is what you mean by box) to gray
.wrapper {
height: 200px;
width: 250px;
border: 3px solid green;
}
.wrapper:hover {
border: 3px solid gray;
}
.wrapper:hover img {
opacity: 0.5;
}
<div class="wrapper">
<a href="#">
<img src="http://via.placeholder.com/250x150" />
</a>
</div>

Answer 2

Try This:
.w3-third {
border: 5px solid lightgreen;
display: inline-block;
position: relative;
text-align: center;
}
p {
margin: 0;
}
a {
color: #000;
text-decoration: none;
}
.w3-third:hover .w3-white {
background-color: gray;
}
.w3-third:hover img {
opacity: 0.2;
}
<div class="w3-third w3-container w3-margin-bottom">
<a href="#" style="display:block"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA">
<div class="w3-container w3-white">
<p><b>PSB2 and COM4</b></p>
<p><b> </b></p>
</div></a>
</div>

Answer 3

now try this one with edited code
.w3-white {
margin-top: -20px;
width: 40%;
}
.w3-container:hover img {
opacity: 0.5;
}
.w3-container:hover .w3-white {
background-color: grey;
}
<div class="w3-third w3-container w3-margin-bottom">
<a href="#" style="display:block"><img src="http://webneel.com/daily/sites/default/files/images/daily/09-2013/1-diwali-greetings.preview.jpg" style="width:40%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>PSB2 and COM4</b></p>
<p><b> </b></p>
</div>
</a>
</div>

Answer 4

Try to put you image and text into a single container and add simple transition. check below snippet.
.img-container {
width: 250px;
border: 2px solid blue;
}
.img-container p {
padding: 10px 0;
margin:0;
transition: all 0.5s ease;
}
.img-container img{
transition: all 0.5s ease;
}
.img-container:hover img {
opacity: 0.5;
}
.img-container:hover p {
background-color: grey;
}
<div class="img-container">
<a href="#">
<img src="http://via.placeholder.com/250x150" />
<p>Some text</p>
</a>
</div>