I am separating my portfolio website into two divs: one on the left, with text and hover states, and one on the right, where there is already a static image of myself that should change into images triggered by the left div's hover states.
I don't know how to change the image on the right side on hover, especially because the text that I want to trigger the image change on hover is in a separate div on the right.
Sorry, I am new to frontend coding and doing bit by bit.
HTML & CSS
.main {width: 40%;margin-left: 2%;margin-top: 5%;float: left;font-family: "calluna-sans", sans-serif;font-weight: 300;font-style: normal;color: black;line-height: 0.8em;font-size: 1.4em;height: 100%;}.box {margin-left:50%;background-color: black;height: 100%;display: flex;align-items: center;justify-content: center;vertical-align: middle;}.photo {position: relative;}<div class="main">This paragraph will show image 1 on hover, image 2 on hover, and so on.</div><div class="box"><div class="photo"><img src="https://picsum.photos/200/300"></div></div>How can I tag the the text in div .main such that when I hover over certain words, the current image in div .photo changes accordingly?
