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

Posted 2023-03-06

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

【英文标题】：How to make text appear next to centered image after it moves?

【发布时间】：2021-07-24 04:59:18

【问题描述】：

基本上，我想将这一块放在页面中间。这个块在技术上应该有图像和文本。当块没有悬停时，我只希望图像显示在页面的中心。当块悬停时，我希望图像向左移动一点，并让文本出现在它的右侧。到目前为止，我已经设法使图像居中，使其在悬停时向左移动，并让悬停显示文本。问题是，文字在图像下方。我理解这是因为图像和文本位于不同的 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 链接：https://jsfiddle.net/bypvm6fu/

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

【参考方案1】：

这里有一个可能的解决方案。我在您的代码中进行了很多更改，主要内容是：容器只包含您已经拥有的元素（不是200vh = 窗口高度的两倍）。只需在其周围添加另一个容器，并在其后添加兄弟姐妹。 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"   />
  </div>
  <div class="about-us-text-container">
    <h1>about us</h1>
    <hr />
    <p>For artists, not by artists</p>
  </div>
</section>

【讨论】：

非常感谢！我一个人根本不会得出这个结论！！我只是有一个问题，是什么让悬停效果在 scale() 部分起作用？所以这里的聊天框（图像）总是向上的，但是悬停在 .about-us 部分上会显示文本？这如何将图像推到一边？

这是转换缩放（从零到全尺寸）和宽度（相同）的组合。由于 flex 设置总是居中，因此图像默认居中，因为文本框宽度为零。过渡时，两个元素一起居中，为图像容器创建“向左移动”效果，因为右侧元素正在增长。

啊，我明白了。非常感谢！