将鼠标悬停在文本上，使用CSS在另一个div(非子div)中显示图像

Question

我正在尝试制作类似于这个网站的东西，在这个网站上，你可以将鼠标悬停在文本上，在背景中显示图像。我在这里找到的东西都试过了，但都没用。我得到的最接近工作的东西是这个答案，但图像会显示在一个小列中，最小化文本所在的位置。如果纯CSS无法实现JS，我愿意实现它。代码在下面，但这是我的jsfiddle。我们将不胜感激。

HTML

<div class="wrapper">
<div class="menu">
<div class="column">
<ul>
<li><span>column 1</span></li>
<li>filler 1</li>
</ul>
</div>
<div class="column">
<ul>
<li><span>column 2</span></li>
<li>filler 2</li>
<li><a id="preview1" href="#page1">link 1</a></li>
<li><a id="preview2" href="#page2">link 2</a></li>
</ul>
</div>
<div class="preview">
<img id="preview1-show" src="http://via.placeholder.com/1000x500">
<img id="preview2-show" src="http://via.placeholder.com/1000x500">
</div>
</div>
</div> 

CSS

.wrapper {
width: 100%;
height: 100vh;
padding: 6em;
position: fixed;
}
.menu {
width: 100%;
height: auto; 
overflow: hidden;
}
.column {
float: left;
width: 20%;
padding: 1em;
text-align: center;
z-index: 1;
}
.column ul {
margin: 0;
padding: 0;
}
.column li {
position: relative; 
display: block;
padding: .3em;
}
.column li span {
font-weight: bolder;
}
.column li a {
display: inline-block;
color: #000;
text-decoration: none;
cursor: pointer;
}
.preview {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: hidden;
}
#preview1:hover ~ #preview1-show {
visibility: visible;
}
#preview2:hover ~ #preview2-show {
visibility: visible;
}

Answer 1

我会在文本悬停时创建

{ 
background-image: url("image url");
background-repeat: no-repeat;
background-position: your position;
}

Answer 2

nvm我想明白了。对于任何感兴趣的人，我从.prew中删除了针对div id和visibility:hidden;的css，而是将display: none; z-index: -1;添加到.prew中，并使用了以下JS代码：

$(function(){
$('#preview1').hover(function(){
$('#preview1-show').show();
},function(){
$('#preview1-show').hide();
});
$('#preview2').hover(function(){
$('#preview2-show').show();
},function(){
$('#preview2-show').hide();
});
});

这不是一个完美的解决方案，因为我必须针对每个单独的链接(我有13个(，但它完全按照我想要的方式工作。如果有人有更优雅的解决方案，请分享。