css - 将鼠标悬停在文本上以使用 CSS 在另一个 div(不是子元素)中显示图像

Question

我正在尝试制作类似 this website 的东西将鼠标悬停在文本上的位置会在背景中显示图像。我已经尝试了在这里找到的所有内容，但没有任何效果。我让它工作的最接近的东西来自这个 answer但图像会显示在文本所在的最小化的小列中。如果纯 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;
}