css - 具有过渡效果的相对定位

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>