具有过渡效果的相对定位

Question

我有六个带标题的盒子。我希望标题在鼠标悬停事件中向上滑动。我在执行此操作时面临两个问题。

如果我使用 position:absolute，图片说明会失去中心对齐。
如果我使用 position:relative，图形标题会居中对齐，但它们无法设置动画。

总的来说，我想将图形标题居中对齐，并且它应该从下到上动画。

我试过以下方法：

Left: 50%;
Right: 50%;
margin-right: 50%;
margin-left 50%;

但这会导致页面居中对齐，但我希望字幕与框的中心对齐，而不是页面的中心对齐。

这是例子

a:hover img{
 -webkit-transform: translateY(-20px);
 -moz-transform: translateY(-20px);
 -ms-transform: translateY(-20px);
 transform: translateY(-20px);
}
a:hover .caption{
 display: inline;
 opacity: 1;
 -webkit-transform: translateY(-10px);
 -moz-transform: translateY(-10px);
 -ms-transform: translateY(-10px);
 transform: translateY(-10px);
 -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
 -moz-transition: -moz-transform 0.4s, opacity 0.1s;
 transition: transform 0.4s, opacity 0.1s;
}
figure{
 overflow: hidden;
}

figure img{
 height: 105px;
 width: 120px;
 padding: 20px 0px 0px 0px;
 display: flex;
 -webkit-transition: -webkit-transform 0.4s;
 -moz-transition: -moz-transform 0.4s;
 transition: transform 0.4s;
}

.caption{
 display: none;
 font-size: 1.4em;
 color: #fff;
 position: relative;
 -webkit-transform: translateY(100%);
 -moz-transform: translateY(100%);
 -ms-transform: translateY(100%);
 transform: translateY(100%);
 -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
 -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
 transition: transform 0.4s, opacity 0.1s 0.3s;
}
a{
 text-decoration:none;
 outline:none;
 color: $fff;
}


.btn-row{
 margin: 30px 0px 0px 0px;
 display: inline-flex;
}

.box-btn{
 height: 150px;
 width: 150px;
 border-radius: 10px;
 border: 1px solid #bdc1c4;
 background-color: $white;
 margin: 0px 10px 0px 10px;
 outline: none;
}

<center><br>
 <div class="btn-row">
 <a href="domainSearch.html" class="link">
  <figure class="box-btn">
   <img src="style/img/university.jpg" class="img">
   <figcaption class="caption">xyz</figcaption>
  </figure>
 </a>
 <a href="domainSearch.html" class="link">
  <figure class="box-btn">
      <img src="style/img/university.jpg" class="img">
   <figcaption class="caption">xyz</figcaption>
  </figure>
 </a>
 <a href="domainSearch.html" class="link">
  <figure class="box-btn">
   <img src="style/img/university.jpg" class="img">
   <figcaption class="caption">abcdefghijkl </figcaption>
  </figure>
 </a>
</div>
<div class="btn-row">
 <a href="domainSearch.html" class="link">
  <figure class="box-btn">
   <img src="style/img/university.jpg" class="img">
   <figcaption class="caption">short text</figcaption>
  </figure>
 </a>
    <a href="domainSearch.html" class="link">
  <figure class="box-btn">
   <img src="style/img/university.jpg" class="img">
   <figcaption class="caption">long text coming here
            </figcaption>
  </figure>
   </a>
    <a href="domainSearch.html" class="link">
     <figure class="box-btn">
      <img src="style/img/university.jpg" class="img">
      <figcaption class="caption">defghi</figcaption>
     </figure>
    </a>
   </div>
  </center>

Answer 1

你的问题是display属性。您的动画是在 display: none; 时制作的，这并不是很有用。只需删除这个 display 定义，动画就会正常工作。

（我在代码段中将字幕的颜色更改为黑色以查看它们）

a:hover img{
 -webkit-transform: translateY(-20px);
 -moz-transform: translateY(-20px);
 -ms-transform: translateY(-20px);
 transform: translateY(-20px);
}
a:hover .caption{
 opacity: 1;
 -webkit-transform: translateY(-10px);
 -moz-transform: translateY(-10px);
 -ms-transform: translateY(-10px);
 transform: translateY(-10px);
 -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
 -moz-transition: -moz-transform 0.4s, opacity 0.1s;
 transition: transform 0.4s, opacity 0.1s;
}
figure{
 overflow: hidden;
}

figure img{
 height: 105px;
 width: 120px;
 padding: 20px 0px 0px 0px;
 display: flex;
 -webkit-transition: -webkit-transform 0.4s;
 -moz-transition: -moz-transform 0.4s;
 transition: transform 0.4s;
}

.caption{
 font-size: 1.4em;
 color: #000;
 position: relative;
 -webkit-transform: translateY(100%);
 -moz-transform: translateY(100%);
 -ms-transform: translateY(100%);
 transform: translateY(100%);
 -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
 -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
 transition: transform 0.4s, opacity 0.1s 0.3s;
}
a{
 text-decoration:none;
 outline:none;
 color: $fff;
}


.btn-row{
 margin: 30px 0px 0px 0px;
 display: inline-flex;
}

.box-btn{
 height: 150px;
 width: 150px;
 border-radius: 10px;
 border: 1px solid #bdc1c4;
 background-color: $white;
 margin: 0px 10px 0px 10px;
 outline: none;
}

<center><br>
 <div class="btn-row">
 <a href="domainSearch.html" class="link">
  <figure class="box-btn">
   <img src="style/img/university.jpg" class="img">
   <figcaption class="caption">xyz</figcaption>
  </figure>
 </a>
 <a href="domainSearch.html" class="link">
  <figure class="box-btn">
      <img src="style/img/university.jpg" class="img">
   <figcaption class="caption">xyz</figcaption>
  </figure>
 </a>
 <a href="domainSearch.html" class="link">
  <figure class="box-btn">
   <img src="style/img/university.jpg" class="img">
   <figcaption class="caption">abcdefghijkl </figcaption>
  </figure>
 </a>
</div>
<div class="btn-row">
 <a href="domainSearch.html" class="link">
  <figure class="box-btn">
   <img src="style/img/university.jpg" class="img">
   <figcaption class="caption">short text</figcaption>
  </figure>
 </a>
    <a href="domainSearch.html" class="link">
  <figure class="box-btn">
   <img src="style/img/university.jpg" class="img">
   <figcaption class="caption">long text coming here
            </figcaption>
  </figure>
   </a>
    <a href="domainSearch.html" class="link">
     <figure class="box-btn">
      <img src="style/img/university.jpg" class="img">
      <figcaption class="caption">defghi</figcaption>
     </figure>
    </a>
   </div>
  </center>

具有过渡效果的相对定位

relative positioning with transition effect

css

css-position

css-transitions