时间戳

首页 > 解决方案 > 悬停时放大图像

html - 悬停时放大图像

问题描述

我想在悬停时放大图像，但问题是我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解决方案。

标签： htmlcssdom

解决方案

诀窍是将要设置动画的元素放入容器中，然后在悬停容器时触发动画。

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>

推荐阅读