Question

我需要一个响应式图像，它可以将自身调整到特定区域的最大值。这适用于下面的代码。但我还需要在图像底部显示图像的描述。我想要这个描述栏填充图像的底部，并在我悬停在图像上时从下往上动画。

我添加了一张我希望实现的图片，以便更好地理解。我认为只使用HTML和CSS就可以放置和调整描述栏的大小，但我不知道如何。 GOAL DESCRIPTION

我想对于描述栏的动画我需要使用一些JavaScript动画，但如果有人知道一些CSS动画转换技巧的解决方案，那就太好了。

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
}
img {
  max-width: 100%;
  max-height: 100%;
}
.description {
  border: #093 medium solid;
  width: 100%;
  height: 40px;
  overflow: hidden;
  position: absolute;
  bottom: 0px;
}
.imageContainer {
  height: 100%;
  width: 100%;
  position: relative;
}

＆＃13;

<div class="imageContainer">

  <img src="..">

  <div class="description">
    inserted description
  </div>
</div>

＆＃13;

Answer 1

尝试以这种方式更新您的代码。

html,
body {
	width: 100%;
	height: 100%;
	font-size: 0;
}

img {
	max-width: 100%;
	max-height: 100%;
}

.imageContainer {
	width: 100%;
	height: 100%;
	position: relative; 
	overflow: hidden;
	display: inline;
}

.description {
	width: 100%;
	height: 0px;
	overflow: hidden;
	position: absolute;
	bottom: 0px;
	background-color: rgba(0, 0, 0, 0.7);
	font-size: 16px;

	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: all 1s ease-in-out 0.5s;
	-moz-transition: all 1s ease-in-out 0.5s;
	-o-transition: all 1s ease-in-out 0.5s;
	-ms-transition: all 1s ease-in-out 0.5s;
	transition: all 1s ease-in-out 0.5s;
}

img:hover~.description {
	height: 40px;
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-o-transition-delay: 0s;
	-ms-transition-delay: 0s;
	transition-delay: 0s;
}

<div class="imageContainer">
	<img src="http://p1.pichost.me/i/9/1321574.jpg">
	<div class="description" style="color: gray">
		inserted description
	</div>
</div>

.imageContainer将其显示设置为内联，因为我们希望.description仅在图像上流动。这就是为什么我们必须将html, body的font-size设置为零，否则.description会使图像溢出一点。

使用CSS调整可调整大小图像的图像描述栏

1 个答案: