img "glued" to the division on hover. How to make it appear elsewhere while maintaining the relation

Question

I'm awfully new to the whole game and approach problems pretty much everyday. Most of the time I solve them with google, learning a lot, but this time I can't find anything.

So, I've got this lovely header that moves to the right and makes some space for another element. I'd like this element (the bonobo head) to appear when I hover over the header.

So, I set the display of the image to none, and block on header:hover, but the image seems glued to the header.

I would like it to appear next to it, in any given location. What do ?

.header {
  position: relative;
  display: block;
  left: 0%;
  padding: 15px;
  background-color: #54e954;
  text-align: center;
  width: 100%;
  height: auto;
  transition: 2s;
  border-radius: 8px;
}

.header:hover {
  left: 15%;
  background-color: #d0f307;
}

.photo {
  position: relative;
  display: none;
}

.header:hover .photo {
  display: block;
}

<div class="header">
  <h1 class="h1header">Lorem Ipsum</h1>
  <div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Bonobo-Head.jpg" class="photo">
  </div>
</div>

Answer 1

Is that what you want it to look like ? If you want this, I did it using the display flex structure.

.header {
  position: relative;
  display: flex;  /* added */
  justify-content: center; 
  align-items: center; 
  left: 0%;
  padding: 15px;
  background-color: #54e954;
  text-align: center;
  width: 100%;
  height: auto;
  transition: 2s;
  border-radius: 8px;
}

.header:hover {
  left: 15%;
  background-color: #d0f307;
}

.photo {
  position: relative;
  display: none;
}

.header:hover .photo {
  display: block;
}

<div class="header">
  <h1 class="h1header">Lorem Ipsum</h1>
  <div class="img-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Bonobo-Head.jpg" class="photo">
  </div>
</div>

Updated : With Javascript, you can better control hover and hoverout operations. Here's an example I've prepared for you. By the way, I had to get the img tag out of the header tag. You can see the additions I've made.

let header = document.querySelector(".header");
let imageContainer = document.querySelector(".img-container");
header.onmouseover = function() {
  imageContainer.classList.add("showImage");
}
header.onmouseout = function() {
  imageContainer.classList.remove("showImage");
}

.header {
  position: relative;
  display: flex;
  /* added */
  justify-content: center;
  align-items: center;
  left: 0%;
  padding: 15px;
  background-color: #54e954;
  text-align: center;
  width: 100%;
  height: 80px;
  transition: 1s;
  border-radius: 8px;
}

.header:hover {
  transform: translateX(15%);
  /* added*/
  background-color: #d0f307;
}

.img-container {
  position: relative;
  display: none;
}

.img-container.showImage {
  position: relative;
  display: block;
}

.container {
  display: flex;
  justify-content: space-between;
}

<div class="container">
  <div class="img-container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Bonobo-Head.jpg" class="photo">
  </div>
  <div class="header">
    <h1 class="h1header">Lorem Ipsum</h1>
  </div>
</div>