img“粘贴”到悬停的分区上。如何在保持关系的同时使它出现在其他位置

Question

我是整个游戏的新手，几乎每天都会处理问题。大多数时候，我用google解决了问题，学到了很多东西，但是这次我什么也找不到。

所以，我有一个可爱的标题，它可以向右移动，并为另一个元素留出一些空间。我希望将鼠标悬停在标头上时显示此元素（no黑猩猩头）。因此，我将图像的显示设置为“ none”，并在header：hover上设置了“ block”，但是图像似乎粘在了header上。我希望它出现在任何给定位置的旁边。怎么办？

.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

是您想要的样子吗？

.header {
  position: relative;
  display: flex; 
  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>