Question

我进行了一个简单的过渡来缩放图像，但是缩放图像时，文本会移到图片下方。当我将鼠标悬停在图像上时，图像如何向下推文本？

df[] <- lapply(df, function(x) as.numeric(as.character(x)))
df[, colSums(df >= 2) > 0]

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

.item img:hover,
.item img:active {
  transform: scale(1.25);
}

Answer 1

请按如下所示编辑CSS-

#poster-carousel .item img:hover, 
#poster-carousel .item img:active{ transform: scale(1.25); position: absolute;}

图片调整大小将把下面的文本压入而不是覆盖它。希望对您有所帮助。

Answer 2

您只需在悬停时添加Log started 09/15/2019 at 21:17:56 Preferred installation mode : qt Trying to init installer in mode qt Mode qt successfully initialized Executing icacls "C:\Users\jcondori\AppData\Local\Temp/postgresql_installer_9cf43bf77d" /inheritance:r Script exit code: 0 Script output: archivo procesado: C:\Users\jcondori\AppData\Local\Temp/postgresql_installer_9cf43bf77d Se procesaron correctamente 1 archivos; error al procesar 0 archivos Script stderr: Executing icacls "C:\Users\jcondori\AppData\Local\Temp/postgresql_installer_9cf43bf77d" /T /Q /grant "jcondori:(OI)(CI)F" Script exit code: 5 Script output: Se procesaron correctamente 1 archivos; error al procesar 1 archivos Script stderr: C:\Users\jcondori\AppData\Local\Temp/postgresql_installer_9cf43bf77d\*: Acceso denegado. Error al ejecutar icacls "C:\Users\jcondori\AppData\Local\Temp/postgresql_installer_9cf43bf77d" /T /Q /grant "jcondori:(OI)(CI)F" : C:\Users\jcondori\AppData\Local\Temp/postgresql_installer_9cf43bf77d\*: Acceso denegado. Cannot delete file C:/Users/jcondori/AppData/Local/Temp/postgresql_installer_9cf43bf77d。这样，当用户将鼠标悬停在图像上方时，将出现一个空白边距，它将下面的文本推入。

尝试一下：

from operator import itemgetter
quarters.sort(key=itemgetter(1), reverse=True)

margin-bottom

Answer 3

只是为了好玩，我尝试了一个更通用的解决方案。

scale的问题似乎在于它没有重新渲染其他对象的位置。但是，如果您更改实际的 width 和 height ，则可以。

但这又增加了一个问题，您需要在CSS中添加初始宽度和高度，以使过渡起作用。

我所做的是使用CSS variables。您需要指定每个图像的尺寸，但是这会使CSS可重用，并且可以使用可变的图像尺寸。

但是，如果所有图像的尺寸都相同，则可以将这些值直接添加到CSS文件中，而避免使用CSS变量。

使用calc()，我将初始宽度乘以1.25（等于25％）。

编辑：删除了高度，因为不必要

整页查看示例。

.item img {
  width: var(--w); /* 320px */
  height: auto;
  transition: all 0.5s ease;
}

.item img:hover,
.item img:active {
  width: calc(var(--w) * 1.25); /* calc(320px * 1.25) */
}

<div class="container item">
  <a href="#">
    <img src="http://lorempixel.com/output/nature-q-c-320-240-8.jpg" style="--w:320px">
  </a>
  <div class="text-center">
    <h4>Name</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>
<div class="container item">
  <a href="#">
    <img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" style="--w:640px">
  </a>
  <div class="text-center">
    <h4>Name</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

响应示例：

.item img {
  width: var(--w); /* 320px */
  height: auto;
  max-width: 100%;
  transition: all 0.5s ease;
}

.item img:hover,
.item img:active {
  width: calc(var(--w) * 1.25); /* calc(320px * 1.25) */
  max-width: 125%;
}

<div class="container item">
  <a href="#">
    <img src="http://lorempixel.com/output/nature-q-c-320-240-8.jpg" style="--w:320px">
  </a>
  <div class="text-center">
    <h4>Name</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>
<div class="container item">
  <a href="#">
    <img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" style="--w:640px">
  </a>
  <div class="text-center">
    <h4>Name</h4>
    <p>Lorem ipsum...</p>
  </div>
</div>

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

3 个答案: