景点列表展示 | HTML+CSS+JS 创建景点信息卡片 - 常规

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>景点列表</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
			background-color: #f2f2f2;
		}
		h1 {
			font-size: 36px;
			font-weight: bold;
			text-align: center;
			margin: 50px 0 30px;
		}
		.container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
			max-width: 1200px;
		}
		.card {
			width: 300px;
			height: 450px;
			margin: 30px;
			background-color: #fff;
			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
			border-radius: 10px;
			overflow: hidden;
			position: relative;
		}
		.card:hover .overlay {
			opacity: 1;
		}
		.card:hover .ticket {
			transform: translateY(-50px);
			opacity: 1;
		}
		.card img {
			width: 100%;
			height: 200px;
			object-fit: cover;
			transition: transform 0.5s ease;
		}
		.card:hover img {
			transform: scale(1.1);
		}
		.card .overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			opacity: 0;
			transition: opacity 0.5s ease;
		}
		.card h2 {
			font-size: 24px;
			font-weight: bold;
			margin: 10px 0;
			text-align: center;
			text-transform: uppercase;
			cursor: pointer;
			transition: color 0.5s ease;
		}
		.card:hover h2 {
			color: #f2f2f2;
		}
		.card p {
			font-size: 14px;
			line-height: 1.5;
			margin: 10px;
			text-align: justify;
			height: 75px;
			overflow: hidden;
		}
		.card .ticket {
			position: absolute;
			bottom: -50px;
			left: 50%;
			transform: translateX(-50%) translateY(0);
			opacity: 0;
			background-color: #f2f2f2;
			padding: 10px 20px;
			border-radius: 25px;
			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
			transition: transform 0.5s ease, opacity 0.5s ease;
		}
		.card .ticket span {
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}
	</style>
</head>
<body>
	<h1>热门景点</h1>
	<div class='container'>
		<div class='card'>
			<img src='https://picsum.photos/300/200' alt='景点照片'>
			<div class='overlay'>
				<h2><a href='#'>景点名</a></h2>
				<p>景点介绍</p>
			</div>
			<div class='ticket'>
				<span>门票价格：¥100</span>
			</div>
		</div>
		<div class='card'>
			<img src='https://picsum.photos/300/200' alt='景点照片'>
			<div class='overlay'>
				<h2><a href='#'>景点名</a></h2>
				<p>景点介绍</p>
			</div>
			<div class='ticket'>
				<span>门票价格：¥120</span>
			</div>
		</div>
		<div class='card'>
			<img src='https://picsum.photos/300/200' alt='景点照片'>
			<div class='overlay'>
				<h2><a href='#'>景点名</a></h2>
				<p>景点介绍</p>
			</div>
			<div class='ticket'>
				<span>门票价格：¥80</span>
			</div>
		</div>
		<div class='card'>
			<img src='https://picsum.photos/300/200' alt='景点照片'>
			<div class='overlay'>
				<h2><a href='#'>景点名</a></h2>
				<p>景点介绍</p>
			</div>
			<div class='ticket'>
				<span>门票价格：¥150</span>
			</div>
		</div>
		<div class='card'>
			<img src='https://picsum.photos/300/200' alt='景点照片'>
			<div class='overlay'>
				<h2><a href='#'>景点名</a></h2>
				<p>景点介绍</p>
			</div>
			<div class='ticket'>
				<span>门票价格：¥90</span>
			</div>
		</div>
		<div class='card'>
			<img src='https://picsum.photos/300/200' alt='景点照片'>
			<div class='overlay'>
				<h2><a href='#'>景点名</a></h2>
				<p>景点介绍</p>
			</div>
			<div class='ticket'>
				<span>门票价格：¥200</span>
			</div>
		</div>
	</div>
</body>
</html>