html - 将悬停图像上的文本移至左侧

Question

我有一些文本，当我悬停在图像上时，我想移至右侧 :

<div class="container-fluid">
  <div class="info-over">
    <div class="infoText">
      Text that need to move to the right
    </div>
    <img src="http://lorempixel.com/300/200" alt="Avatar" class="image">              
  </div>
</div>

我希望当我时，div infoText 缓慢移动到右侧 50px悬停在图像上，当我停止悬停图像时，它会慢慢向后移动。

尝试过转换，但它对我不起作用，也许你们可以帮忙？

Answer 1

您可以使用Flexbox、定位、顺序属性以及相邻同级来实现组合器(+)目标 .infoText div:

.info-over {
  display: inline-flex; /* takes only the content's width */
  flex-direction: column; /* stacks flex-items (children) vertically */
}

.infoText {
  order: -1; /* places the text above the img to achive the same display/layout as before */
  position: relative; /* positioned relative to its normal position */
  top: 0; /* default */
  left: 0; /* default */
  transition: left 1s linear; /* adjust */
}

.image:hover + .infoText {
  left: 50px;
  transition: left 1s linear; /* adjust */
}

<div class="container-fluid">
  <div class="info-over">
    <img src="http://lorempixel.com/300/200" alt="Avatar" class="image"> <!-- moved it above the text so that you can use the + selector to target the element below -->
    <div class="infoText">Text that needs to move to the right</div>
  </div>
</div>

使用转换的另一种方式:translateX():

.info-over {
  display: inline-flex;
  flex-direction: column;
}

.infoText {
  order: -1;
  transition: transform 1s linear;
}

.image:hover + .infoText {
  transform: translateX(50px);
  transition: transform 1s linear;
}

<div class="container-fluid">
  <div class="info-over">
    <img src="http://lorempixel.com/300/200" alt="Avatar" class="image"> <!-- moved it above the text so that you can use the + selector to target the element below -->
    <div class="infoText">Text that needs to move to the right</div>
  </div>
</div>

但我建议您使用第一种解决方案。