static image position for specific location using CSS Hover

Question

Super new to CSS and need some help! I want to hover over some text, and have my image show up in s specific spot on my page and not pop-up around the text. I tried changing the location of the photo, but no matter what I try, it stays in the same place, hovering around the text. Your help would be much appreciated!

#image {
  display: none;
  position: relative;
  right: 10%;
}

#text:hover+#image {
  display: block;
}

<div id="hotlistContainer" class="col-md-6">
  <div class="col-md-5">
    <p id="text">Some Text</p>
    <div id="image"><img src="https://via.placeholder.com/350x150"></div>
  </div>
</div>

Answer 1

Change the position of the image to absolute.

#image {
    display: none;
    position: absolute;
    right: 10%;
}

#text:hover + #image {
    display: block;
}

<div id="hotlistContainer" class="col-md-6">
    <div class="col-md-5">
        <p id="text">Some Text</p>
        <div id="image">
            <img src="https://via.placeholder.com/350x150">
        </div>
    </div>
</div>