相对定位与过渡效应

Question

我有六个带标题的方框。我想在鼠标悬停事件中向上滑动标题。这样做时我遇到两个问题。

1. 如果我使用position：absolute，图标题就会丢失它们的中心对齐。

2. 如果我使用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>