css实现悬浮卡片

news2025/1/17 21:46:32

结果展示
在这里插入图片描述

html代码

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link rel="stylesheet" type="text/css" href="./111.css">
</head>
<body>

	
		    <div class="container">
		      
		        <ul>
		        	<li>
		            	<div class="port-1 effect-1">
		                	<div class="image-box">
		                    	<img src="../vuekinesis/src/assets/2.jpg" alt="Image-1">
		                    </div>
		                    <div class="text-desc">
		                    	<h3>xxx</h3>
		                        <p>8年学习经验 </p>
		                    </div>
		                </div>
		            </li>
		            
		        </ul>
		     
		    </div>

	
</html>

css代码


.container {
	margin: 0 auto;
	max-width: 1060px;
}

h2 {
	color: #fff;
	float: left;
	width: 100%;
	font-size: 24px;
	font-weight: 400;
	text-align: center;
	padding: 50px 0 40px;
	position: relative;
	z-index: 50;
}

h2 span {
	position: relative;
	padding-bottom: 10px;
}

h2 span:after {
	content: "";
	width: 50%;
	height: 3px;
	background-color: #fff;
	position: absolute;
	left: 25%;
	bottom: 0;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img {
	max-width: 100%;
	vertical-align: middle;
}

.full-length {
	width: 100%;
	float: left;
	padding-bottom: 80px;
}

ul {
	margin: 0 -1.5%;
}

li {
	float: left;
	width: 31.33%;
	margin: 10px 1%;
	list-style: none;
}


.text-desc {
	position: absolute;
	left: 0;
	top: 0;
	background-color: #fff;
	height: 100%;
	opacity: 0;
	width: 100%;
	padding: 20px;
}
.port-1 {
	width: 100%;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.port-1 .text-desc {
	opacity: 0.9;
	top: 100%;
	transition: 0.5s;
	color: #000;
	padding: 45px 20px 20px;
}

.port-1 img {
	transition: 0.5s;
}

.port-1:hover img {
	transform: scale(1.2);
}

.port-1.effect-1:hover .text-desc {
	top: 0;
}