I'm attempting to create a website similar to this one where hovering over text reveals an image in the background. Despite trying various methods suggested here, I haven't had any success so far. The closest I've come is following this solution, but it displayed the image within a small column next to the text. If achieving this effect with pure CSS is not feasible, I am open to using JavaScript as well. Below is the code snippet, and you can also view my JSFiddle here. Any assistance would be highly appreciated.
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;
}