跟着B站大佬學習系列之HTML+CSS製作圖片懸浮效果

首先上效果圖：

HTML

<div class="image middle">
	<img src="img/yyqx.jpg" alt="易烊千璽">
	<div class="image-content">
		<h1>易烊千璽</h1>
		<div class="icons">
			<i class="icon fa fa-heart"></i>
			<i class="icon fa fa-comment"></i>
			<i class="icon fa fa-share"></i>
		</div>
	</div>
</div>

圖標使用的是Font Awesome，以前常用阿里巴巴iconfont，比這個麻煩一點
這個只需要在header中引入<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">即可

css

*{
	margin: 0;
	padding: 0;
}
body{
	background-color: #e0e0e0;
}
.middle{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.image{
	width: 440px;
	height: 330px;
	overflow: hidden;
	cursor: pointer;
}
.image-content{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 40px;
	box-sizing: border-box;
}
.image-content>h1{
	transform: translateY(50px);
	transition: 0.4s;
}
.image:hover .image-content>h1{
	transform: translateY(0px);
}
.icons{
	position: absolute;
	right: 10px;
	bottom: 40px;
}
.icon{
	color: #333;
	font-size: 22px;
	margin: 0 6px;
	transform: translateY(80px);
	transition: 0.4s;
}
.image:hover .icon{
	transform: translateY(0px);
}
.icon:nth-child(1){
	transition: transform 0.4s 0.05s,color 0.4s; 
}
.icon:nth-child(2){
	transition: transform 0.4s 0.1s,color 0.4s; 
}
.icon:nth-child(3){
	transition: transform 0.4s 0.15s,color 0.4s; 
}
.icon:hover{
	font-size: 25px;
	color: blue;
}

接下來絕妙的事情發生了

.image-content::before{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: rgba(255,255,255,0.7);
	width: 100%;
	height: 0;
	clip-path: polygon(0 100%,100% 0,100% 100%);//畫三角形
	transition: 0.5s;
}
.image-content:hover::before{
	height: 140px;
}

不得不說clip-path: polygon(0 100%,100% 0,100% 100%);這個真是妙啊
這裏介紹的十分詳細clip-path