悬停时放大图像

Question

我想在悬停时放大图像，但是问题是，只有使overflow: hidden绝对定位，我才能使它与img重叠，从而使其超出其自身的容器，因此，所有article内容都“认为”其中没有图像容器。

article {
  background: #e8e8e8;
  color: #484848;
  overflow: hidden;
  padding: 0.5rem;
  margin: 2rem auto 0 auto;
  width: 60vw;
}

section {
  float: left;
  margin-right: 0.5rem;
}

p {
  margin: 0;
}

img {
  transition: 0.2s linear;
  object-fit: cover;
  width: 128px;
  height: 128px;
}

img:hover {
  position: absolute;
  transform: scale( 1.5 );
}

<article>
  <section>
    <img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>
    <img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>
  </section>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

article变成绝对位置后如何冻结所有img内容？

请没有JS解决方案。

Answer 1

float:left上的[p完成了工作！。

article {
  background: #e8e8e8;
  color: #484848;
  overflow: hidden;
  padding: 0.5rem;
  margin: 2rem auto 0 auto;
  width: 60vw;
}

section {
  float: left;
  margin-right: 0.5rem;
}

p {
  margin: 0;
  float:left;
}

img {
  transition: 0.2s linear;
  object-fit: cover;
  width: 128px;
  height: 128px;
}

img:hover {
  position: absolute;
  transform: scale( 1.5 );
}

<article>
  <section>
    <img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>
    <img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>
  </section>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

由于您希望p不与图像交互，所以在悬停之前，文本也将不与图像交互并且不更改其自身位置。

Answer 2

技巧是将要设置动画的元素放入容器中，然后在将鼠标悬停在容器上时触发动画。

article {
  background: #e8e8e8;
  color: #484848;
  padding: 0.5rem;
  margin: 2rem auto 0 auto;
  width: 60vw;
}

section {
  float: left;
  margin-right: 0.5rem;
}

p {
  margin: 0;
}

img {
  transition: 0.2s linear;
  object-fit: cover;
  width: 128px;
  height: 128px;
}

.image-container {
  display: inline-block;
}

.image-container:hover > img {
  transform: scale( 1.5 );
}

<article>
  <section>
    <div class="image-container">
      <img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>  
    </div>
    <div class="image-container">
      <img src=https://image.freepik.com/free-vector/repeating-geometrical-square-background-pattern-vector-graphic-design-from-random-rotated-squares-with-opacity-effect_1164-1119.jpg>
     </div>
  </section>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>