Transitions affecting separate divs - css

Question

I am attempting to create a front end screen, where there are images labeled step 1-4 next to each other the idea is that if the user hovers over one of these step that on the div below them the the relevant and corresponding image should fade in, and when they remove their cursor or move it to another step the image should fade out or be replaced by another image respectively. thus far I have been able to add in coding as to have the step 1 - 4 images being replaced by their correct images, but i am dumbfounded on how to get the transition effects happen on a completely different div. The code (HTML and CSS) I am using is included below.
HTML:
<div class="col-md-3">
<div class="swap-1" id="step1">
<a>
<img src="~/images/step1-cover.png" />
</a>
</div>
</div>
<div class="col-md-3">
<div class="swap-2" id="step2">
<a>
<img src="~/images/step2-cover.png" />
</a>
</div>
</div>
<div class="col-md-3">
<div class="swap-3" id="step3">
<a>
<img src="~/images/step3-cover.png" />
</a>
</div>
</div>
<div class="col-md-3">
<div class="swap-4" id="step4">
<a>
<img src="~/images/step4-cover.png" />
</a>
</div>
</div>
#*the div below is where the corresponding images should appear*#
<div id="steps" class="steps" style="height:300px; width:1000px;
margin-bottom:30px; margin-top:100px"></div>
CSS:
.swap-1 {
background-image: url(../images/step1.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 300px;
}
.swap-1 a {
display: block;
}
.swap-1 a img {
opacity: 1;
width: 300px;
height: auto;
display: block;
transition: all .6s ease-in;
}
.swap-1 a:hover img {
opacity: 0;
transition: all .6s ease-in;
}
.swap-2 {
background-image: url(../images/step2.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 300px;
}
.swap-2 a {
display: block;
}
.swap-2 a img {
opacity: 1;
width: 300px;
height: auto;
display: block;
transition: all .6s ease-in;
}
.swap-2 a:hover img {
opacity: 0;
transition: all .6s ease-in;
}
.swap-3 {
background-image: url(../images/step3.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 300px;
}
.swap-3 a {
display: block;
}
.swap-3 a img {
opacity: 1;
width: 300px;
height: auto;
display: block;
transition: all .6s ease-in;
}
.swap-3 a:hover img {
opacity: 0;
transition: all .6s ease-in;
}
.swap-4 {
background-image: url(../images/step4.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 300px;
}
.swap-4 a {
display: block;
}
.swap-4 a img {
opacity: 1;
width: 300px;
height: auto;
display: block;
transition: all .6s ease-in;
}
.swap-4 a:hover
img {
opacity: 0;
transition: all .6s ease-in;
}

Answer 1

If you are not limited to that specific HTML, you can do it way simpler...
simply put each 'slide' (.image) next to its 'tab' (.step) and you can access it with CSS using the '+' (next element) selector, like:
.step:hover + .image{ /* active slide css here */ }
Please check the code in the fiddle: https://jsfiddle.net/ck0bqy1h/