[css]使用css实现鼠标悬停放大鼠标离开缩小的缩放过渡效果图片(带文字)

AI Thabo

于 2020-04-23 20:23:54 发布

阅读量1w

点赞数 23

分类专栏：基础三大件文章标签： css css3 html html5

本文链接：https://blog.youkuaiyun.com/m0_46470372/article/details/105716194

版权

[css]使用css实现鼠标悬停放大鼠标离开缩小的缩放过渡效果图片(带文字)

缩放过渡效果

在这里插入图片描述

思路分析

在这里插入图片描述

进行页面布局，需要一个父容器(不一定要figure 几乎可以是任意块级元素) 与 img标签长宽一致

<figure>
	<img src="photo.jpg" alt="">
	<p>这是一张图片</p>	// 如果有文字需要请添加这一行
</figure>

对父容器进行设定，使其子元素超出容器大小的部分隐藏

figure{
	height:200px;width:400px;
	max-height:200px;max-width:400px;
	overflow:hidden;
	position:relative;	// 如果有文字需要请添加这一行 需要给子元素定位使用
	background:#000000;	// 背景色 可以在缩放之后 透明度升高时 为img加暗
}