时间戳

首页 > 解决方案 > 当我将鼠标悬停在图像上时，如何推送文本？

html - 当我将鼠标悬停在图像上时，如何推送文本？

问题描述

我做了一个简单的转换来缩放图像，但是当图像被缩放时，文本会在图片下方。当我将鼠标悬停在图像上时，图像如何将文本向下推？

.item img {
  transition: all 0.5s ease;
}

.item img:hover,
.item img:active {
  transform: scale(1.25);
}
<div class="container item">
  <a href="#">
    <img src="http://lorempixel.com/output/nature-q-c-300-300-8.jpg">
  </a>
  <div class="text-center">
    <h4>Name</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

标签： htmlcssbootstrap-4

解决方案

您只需margin-bottom在悬停时添加即可。这样，当用户将鼠标悬停在图像上时，将产生一个margin-bottom，它将推动下面的文本。

尝试这个：

.item img {
  transition: all 0.5s ease;
}

.item img:hover,
.item img:active {
  transform: scale(1.25);
  margin-bottom: 30px;
}
<div class="container item">
  <a href="#"><img src="http://lorempixel.com/output/nature-q-c-300-300-8.jpg"></a>
  <div class="text-center">
    <h4>Name</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

推荐阅读