Html
    Css
    Js


@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap');
	* {
	margin:0;
	padding:0;
	font-family:'Poppins',sans-serif;
	box-sizing:border-box;
}
body {
	display:flex;
	justify-content:center;
	align-items:center;
	min-height:100vh;
	background:linear-gradient(0deg,#fff 50%,#74b9ff);
}
.container {
	max-width:1000px;
	position:relative;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	transition:0.5s;
}
.container:hover .card {
	filter:blur(5px);
	transform:scale(0.7);
}
.container .card:hover {
	filter:blur(0px);
	transform:scale(1);
}
.container .card {
	position:relative;
	width:250px;
	height:300px;
	background:#fff;
	display:flex;
	justify-content:center;
	align-items:center;
	transition:0.5s;
}
.container .card:before {
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	background:#FFF;
	transition:0.5s;
}
.container .card:hover:before {
	background:#000;
	transform:scaleY(1.15);
	box-shadow:0 5px 15px rgba(0,0,0,0.2);
}
.container .card .content {
	text-align:center;
	z-index:2;
	padding:0 20px;
	transition:0.5s;
}
.container .card:hover .content {
	color:#FFF;
}
.container .card .content h2 {
	font-size:3em;
}
.container .card .content p {
	font-size:0.9em;
}
.container .card .content a {
	display:inline-block;
	margin-top:15px;
	padding:5px 10px;
	color:#fff;
	background:#262626;
	text-decoration:none;
}
.container .card:hover .content a {
	background:#74b9ff;
}

↑上面代碼改變,會自動顯示代碼結果 jQuery調用版本:1.11.3
 立即下載

純css景深卡鼠標懸停效果

更新時間:2019-12-24 16:46:28

0