How to make an image hover outside the span container - html

Question

.wrap {
position: relative;
width: 80vmin;
height: 80vmin;
margin: 0 auto;
background: inherit;
transform: scale(0.2) translatez(0px);
opacity: 0;
transition: transform .5s, opacity .5s;
}
a {
position: absolute;
left: 0;
top: 0;
width: 47.5%;
height: 47.5%;
overflow: hidden;
transform: scale(.5) translateZ(0px);
background: #242943;
}
a div {
height: 100%;
background-size: cover;
opacity: .5;
transition: opacity .5s;
border-radius: inherit;
}
a:nth-child(1) {
border-radius: 40vmin 0 0 0;
transform-origin: 110% 110%;
transition: transform .4s .15s;
background: #a23658;
}
a:nth-child(1) div {
background-image: url('p10.jpg');
}
a:nth-child(5) {
width: 55%;
height: 55%;
left: 22.5%;
top: 22.5%;
border-radius: 50vmin;
box-shadow: 0 0 0 5vmin #242943;
transform: scale(1);
}
a:nth-child(5) div {
background-image: url('groupphoto.jpg');
}
span {
position: relative;
display: block;
top: 45vmin;
width: 7vmin;
height: 7vmin;
background-image: url('squarelogo.png');
margin-left: auto;
margin-right: auto;
}
span span {
position: relative;
width: 60%;
height: 1px;
}
span span:after {
top: 1.5vmin;
}
span:hover+.wrap,
.wrap:hover {
transform: scale(.81) translateZ(0px);
opacity: 1;
}
span:hover+.wrap a,
.wrap:hover a {
transform: scale(1) translatez(0px);
}
a:hover div {
opacity: 1;
transform: translatez(0px);
}
<span><span></span></span>
<div class="wrap">
<a href="Architecture.html" title="Architecture">
<div>
<div></div>
</div>
</a>
<a href="3D & Animation.html" title="3D & Animation">
<div></div>
</a>
<a href="Graphics.html" title="Graphics">
<div></div>
</a>
<a href="Marketing.html" title="Marketing">
<div></div>
</a>
<a href="AboutUS.html" title="About Us">
<div></div>
</a>
</div>
Here is my code. I have 5 "a nth childs" in total. I'm trying to write a code that makes it if you hover over the nth childs, an image OUTSIDE of the span/span container appears. I've tried writing the html code for it in classes and everything. I don't think I'm doing it right and appear to be facing a brick wall. Can anyone help me?

Answer 1

1 - NO JAVASCRIPT
Assuming you don't want to use Javascript, using CSS selectors, you can achieve what you are looking for. In my example, I'm using divs instead of images, for clarity.
HTML:
<span class="span1"> SPAN 1 </span>
<div class="hide1">I am an image shown when span 1 is hovered</div>
<br>
<span class="span2"> SPAN 2 </span>
<div class="hide2">I am an image shown when span 2 is hovered</div>
CSS:
.hide1, .hide2{
display: none;
}
.span1:hover + .hide1 {
display: block;
color: blue;
}
.span2:hover + .hide2 {
display: block;
color: blue;
}
Here is the JSFiddle
2 - JAVASCRIPT SOLUTION
Now, if you're willing to use JavaScript, things are much simpler and flexible:
HTML:
<div>
<span onmouseover="image1()" onmouseout="imageout()" id="span1">1</span>
<span onmouseover="image2()" onmouseout="imageout()" id="span2">2</span>
<div id="image1">IMAGE 1</div>
<div id="image2">IMAGE 2</div>
</div>
CSS:
#span1, #span2{
cursor: default;
}
#image1, #image2{
display: none;
}
JavaScript:
var img1 = document.getElementById('image1');
var img2 = document.getElementById('image2');
function image1(){
img1.style.display = "inline-block";
}
function image2(){
img2.style.display = "inline-block";
}
function imageout(){
img1.style.display = "none";
img2.style.display = "none";
}
Here is the JSFiddle