How to treat to attribute selector:hover - css

Question

Im new with css, Im one of our homework in class is to make a box with 4 imgs, that while im mouse hover image it will be bigger in the center of the box.
each image must be with 2 files, small one will start with th and the big one start with big. need to practice the attribute selector.
so I make something, but I just cant fiqure why its not working.
body>div {
width: 100%;
height: 800px;
border: 2px solid black;
}
div {
position: relative;
}
div>div {
position: absolute;
top: 200px;
left: 400px;
}
img {
display: block;
margin: 20px 10px;
}
img[src*="th"] {
width: 250px;
border: 3px solid black;
box-shadow: 10px 10px 10px #666;
}
img[src*="/big"] {
display:none;
}
img[src*="th"]:hover {
box-shadow: inset 10px 10px 10px #666;
}
img[src*="th"]:hover+img[src*="/big"] {
display:block;
}
</style>
<div>
<img src="/HTML/HW/HW27_5/thCar.jpg" alt="">
<img src="/HTML/HW/HW27_5/thHome.jpg" alt="">
<img src="/HTML/HW/HW27_5/thTree.jpg" alt="">
<img src="/HTML/HW/HW27_5/thPlane.jpg" alt="">
<div>
<img src="/HTML/HW/HW27_5/bigCar.jpg" alt="">
</div>
<div>
<img src="/HTML/HW/HW27_5/bigHome.jpg" alt="">
</div>
<div>
<img src="/HTML/HW/HW27_5/bigTree.jpg" alt="">
</div>
<div>
<img src="/HTML/HW/HW27_5/bigPlane.jpg" alt="">
</div>
</div>

Answer 1

Try it by keeping the imgs next to each other.
The "+" works for next sibling element only.
.outer-div {
width: 100%;
height: 500px;
border: 2px solid black;
}
.outer-div {
position: relative;
}
img {
display: block;
margin: 15px 10px;
}
img[src*="/100"] {
border: 3px solid black;
box-shadow: 10px 10px 10px #666;
}
img[src*="/200"] {
display: none;
}
img[src*="/100"]:hover {
box-shadow: inset 10px 10px 10px #666;
}
img[src*="/100"]:hover+img[src*="/200"] {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="outer-div">
<div class="inner-div">
<img src="https://picsum.photos/100" alt="">
<img src="https://picsum.photos/200" alt="">
</div>
<div class="inner-div">
<img src="https://picsum.photos/100" alt="">
<img src="https://picsum.photos/200" alt="">
</div>
<div class="inner-div">
<img src="https://picsum.photos/100" alt="">
<img src="https://picsum.photos/200" alt="">
</div>
<div class="inner-div">
<img src="https://picsum.photos/100" alt="">
<img src="https://picsum.photos/200" alt="">
</div>
</div>

Answer 2

The +-selector select an element that is directly after another element.
Therefor your big image div must be directly next to the smaller image. And you have use this selector img[src*="th"]:hover+div img[src*="/big"] instead of img[src*="th"]:hover+img[src*="/big"] to address the nested image.
body>div {
width: 100%;
height: 800px;
border: 2px solid black;
}
div {
position: relative;
}
div>div {
position: absolute;
top: 200px;
left: 400px;
}
img {
display: block;
margin: 20px 10px;
}
img[src*="th"] {
width: 250px;
border: 3px solid black;
box-shadow: 10px 10px 10px #666;
}
img[src*="/big"] {
display: none;
}
img[src*="th"]:hover {
box-shadow: inset 10px 10px 10px #666;
}
img[src*="th"]:hover+div img[src*="/big"] {
display: block;
}
</style>
<div>
<img src="https://dummyimage.com/250x50/f00&text=/th" alt="">
<div>
<img src="https://dummyimage.com/500x200/f00&text=/big" alt="">
</div>
<img src="https://dummyimage.com/250x50&text=/th" alt="">
<div>
<img src="https://dummyimage.com/500x200&text=/big" alt="">
</div>
<img src="https://dummyimage.com/250x50/0f0&text=/th" alt="">
<div>
<img src="https://dummyimage.com/500x200/0f0&text=/big" alt="">
</div>
<img src="/HTML/HW/HW27_5/thPlane.jpg" alt="">
<div>
<img src="/HTML/HW/HW27_5/bigPlane.jpg" alt="">
</div>
</div>