移动后如何使文本出现在居中图像旁边？

Question

基本上，我有一个要居中放置在页面中间的块。这个块在技术上应该有图像和文本。当该块未悬停时，我只希望图像显示在页面中央。当块悬停在上方时，我希望图像向左移动一点，并让文本出现在它的右侧。到目前为止，我已经设法使图像居中，使其在悬停时向左移动，并使悬停显示文本。问题是，文字在图片下方。我明白这是因为图像和文本在不同的 div 中，所以它出现在后面是有道理的。但是，我不确定如何将它们都放在同一个 div 中，并确保当块未悬停在页面上时图像位于页面的中心位置。这可能吗？

具体来说，到目前为止，这是该部分的 HTML 代码：

<section class="about-us">
    <!-- Image division -->
    <div class="chatBox">
        <img src='./art/chatboxAbout.png' width= "150" height = "150" />
    </div>
    <!-- Text division, the actual about-us part -->
    <div class="about-us-text-container">
        <!-- Header part -->
        <h1>about us</h1>
        <!-- Horizontal line for styling -->
        <hr />
        <!-- Actual text -->
        <p>For artists, not by artists</p>
    </div>
</section>

和CSS：

/* General sizing and format for the about-us segment */
.about-us{
    width: 100%;
    height: 200vh;
    background-color: #fff;
}

/* Formatting for the chatBox image, basic stuff */
.about-us .chatBox{
  position: relative;
  margin-top: 50px;
  text-align: center;
  transition: transform 0.3s ease; /* Preparing for transition */
  transition: translateX(0px); /* What the transition is */
}

/* Move left on hover effect */
.chatBox:hover{
  transform: translateX(-200px);
}

/* Formatting for the general text div */
.about-us .about-us-text-container{
  margin-top: 50px;
  text-align:center;
  margin-left: 15px;
  opacity: 0; /* Don't display unless hovered */
  transform: 1s; /* Setting duration for the hover opacity transition */
}

/* Show on hover effect */
.chatBox:hover + .about-us-text-container{
  opacity: 1;
}

/* Formatting for the header */
.about-us .about-us-text-container h1{

}

/* Formatting for the horizontal line */
.about-us .about-us-text-container hr{

}

/* Formatting for the paragraph */
.about-us .about-us-text-container p{

}

这是到目前为止整个代码的 JSFiddle link：https://jsfiddle.net/bypvm6fu/

感谢任何帮助！非常感谢！

Answer 1

这里有一个可能的解决方案。我在你的代码中做了很多改动，主要是：容器只包含你已经拥有的元素（不是 200vh = window 高度的两倍）。只需在其周围添加另一个容器，并在其后添加兄弟姐妹。 transition 影响 all，即 width、opacity 和 transform: scale 以在未悬停时保持图像居中。而且 hover 在容器上，而不是在图像上，这样可以防止之前的跳跃效果：

.about-us {
  width: 100%;
  height: 150px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-content: center;
  margin-top: 50px;
}

.about-us .chatBox {
  position: relative;
  text-align: center;
}

.about-us .about-us-text-container {
  text-align: center;
  margin-left: 15px;
  opacity: 0;
  transition: all 1s;
  width: 0;
  transform: scale(0);
}

.about-us:hover .about-us-text-container {
  opacity: 1;
  width: 150px;
  transform: scale(1);
}

<section class="about-us">
  <div class="chatBox">
    <img src="https://picsum.photos/150" width="150" height="150" />
  </div>
  <div class="about-us-text-container">
    <h1>about us</h1>
    <hr />
    <p>For artists, not by artists</p>
  </div>
</section>

移动后如何使文本出现在居中图像旁边？

How to make text appear next to centered image after it moves?

css

hover

centering

flexbox

css-transitions