Question

使用Bootstrap框架的Wordpress网站

＆＃13;

.test {
  position: absolute;
  z-index: 9;
  left: 50%;
  height: 10em;
  width: 10em;
  margin-left: -5em;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.linkage:hover + .test {
  opacity: 1;
}

＆＃13;

<div class="row">
  <div class="col-md-12 indx-img" style="background-image:url('...');">
  
     <a href="<?php the_permalink(); ?>" class="linkage">Link</a>
    
     <div class="test"> Test </div>
  
  </div>
</div>

＆＃13;

现在我的网站上有div＆＃39; test＆＃39;当链接＆＃39;链接＆＃39;时，显示（不透明度1）垂直/水平居中。徘徊（连接是容器的100％高度和宽度）。

我想为“测试”制作动画。 div因为它在悬停时淡入。我正在考虑使用比例（将鼠标悬停在原始尺寸上，然后逐渐缩小）或其他东西。除非有人有一个更酷的想法

Answer 1

看起来你正在寻找类似下面的代码片段（转换而不是动画）。在链接的hover上，.test在X轴和Y轴上按比例缩放两倍于原始大小，在鼠标移出时，它将恢复到正常大小。

＆＃13;

.test {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;  /* added as I think this was missed in your code */
  height: 10em;
  width: 10em;
  margin-left: -5em;
  background-size: cover;
  background: url(http://lorempixel.com/500/500);  /* added for image */
  opacity: 0;
  transition: all 0.5s ease;  /* modified to transition all property changes */

  /* added to scale up the div with the center as the origin */
  transform-origin: 50% 50%;
  transform: translateY(-50%) scaleX(2) scaleY(2);
}
.linkage:hover + .test {
  opacity: 1;
  transform: translateY(-50%) scaleX(1) scaleY(1);  /* bring back to normal state */
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="row">
  <div class="col-md-12 indx-img" style="background-image:url('...');"> 
    <a href="#" class="linkage">Link</a>
    <div class="test">Test</div>
  </div>
</div>

＆＃13;

或者，您也可以使用矩阵变换。 translateY(-50%) scaleX(2) scaleY(2)的等效值为matrix(2, 0, 0, 2, 0, -101)，translateY(-50%) scaleX(1) scaleY(1)的等效值为matrix(1, 0, 0, 1, 0, -101)。

Answer 2

这永远不会是真的：

.linkage:hover + .test {
  opacity: 1;
}

因为链接（悬停与否）不是测试的兄弟。

.test绝对定位，但没有非静态的父元素。你想对身体绝对吗？您使用左/边距水平居中，看起来您正在尝试使用translateY垂直居中，但您从不指定顶部。也许巩固一种方法？

top:50%; left:50%; transform: translateX(-50%) translateY(-50%);

在悬停css上动画div - 可能的循环

2 个答案: