css过渡效果_具有CSS过渡效果的图像标题

css过渡效果

Variations on this technique are fairly common on the web, so I decided to code my own version as a short lesson. The examples above show two versions of the effect: an image cross-fade and a scroll, both with captions that slide into place. The markup looks like this:

这种技术的变化在网络上相当普遍，因此我决定编写自己的版本作为一个简短的课程。 上面的示例显示了效果的两个版本：图像淡入淡出和滚动，均带有可滑入到位的标题。 标记如下所示：

<div id="sliding-container">
	<figure>
		<img src="hong-kong-skyline.jpg" alt>
		<figcaption>Hong Kong Skyline at Night</figcaption>
	</figure>
	<figure>
		<img src="monument-valley-panorama.jpg" alt style="position: absolute">
		<img src="monument-valley-mittens-panorama.jpg" alt>
		<figcaption>Monument Valley</figcaption>
	</figure>
</div>

Both <figure> elements have relative positioning; overflow is set to hide anything outside the immediate area of the image after the captions are positioned, and the figure elements are set side-by-side using flexbox:

两个<figure>元素都有relative位置 ； 设置字幕后，将overflow设置为隐藏图像直接区域之外的所有内容，并使用flexbox并排设置figure元素：

div#sliding-container { display: flex; }
div#sliding-container figure {
	margin: 0; 
	position: relative; 
	flex: 1;
	font-size: 0; 
	overflow: hidden; 
}

The captions are provided with an rgba background color, while using position: absolute:

标题带有rgba背景色，同时使用position: absolute ：

div#sliding-container figure figcaption { 
	background: rgba(0,0,0,0.3);
	color: #fff;
	padding: .3rem;
	position: absolute;
	top: -2rem;
	transition: .6s;
}

Making the captions lower when the user hovers over an image is made possible by attacing a :hover pseudo-selector to the <figure> that changes the position of the descendant <figcaption>.

通过将:hover伪选择器附加到<figure>来更改后代<figcaption>的位置，可以在用户将鼠标悬停在图像上时降低字幕的<figcaption> 。

div#sliding-container figure:hover figcaption { 
	transform: translateY(2rem);
}

Next we want to animate the images inside each <figure>. First, we need to set them up correctly:

接下来，我们要为每个<figure>的图像设置动画。 首先，我们需要正确设置它们：

div#sliding-container figure img { 
	max-width: 100%;
	transition: 2.4s linear;
}
div#sliding-container figure:first-of-type img {
	max-width: 133%;
}

The first image, which is larger than its container, must move right to left:

大于其容器的第一个图像必须从右向左移动：

div#sliding-container figure:first-of-type:hover img { 
	transform: translateX(-24%); 
}

Because they are absolutely positioned, the images of Monument Valley will appear one top of the other. We want to fade out the first image on hover:

由于它们的位置绝对正确，因此纪念碑谷的图像将显示在另一个图像的顶部。 我们要淡出悬停时的第一张图片：

div#sliding-container figure:last-of-type:hover img:nth-child(1) { 
	opacity: 0;
}

翻译自: https://thenewcode.com/448/Image-Captions-with-CSS-Transition-Effects

css过渡效果