活动详情页带图片放大效果和悬浮功能的代码

最新推荐文章于 2024-10-31 06:29:51 发布

Qys1017

最新推荐文章于 2024-10-31 06:29:51 发布

阅读量132

点赞数

文章标签： css3 css 前端散列表

本文链接：https://blog.csdn.net/Qys1017/article/details/134080242

版权

大家在开发过程中是不是要展示活动详情、展会展示或者类似的页面，带时间地点展示的，功能强大，全部打包，拿走不谢，喜欢请关注我，谢谢！

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{margin: 0;padding: 0}a{text-decoration: none}
		body{width: 840px;margin:0 auto}

		.zhanlan{width: 340px;margin: 30px 30px;padding-left: 10px;float: left;position: relative;-webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    transition: all 0.3s linear;overflow: hidden;}

		.zhanlan:hover {
    box-shadow: 0 5px 15px rgba(45,50,55,.2);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
}
		.zhanlan h3{padding:10px 0  }
		.zhanlan img{width: 340px;height: 191px;    -webkit-transition: -webkit-transform 0.5s;
    -ms-transition: -ms-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    transition: transform 0.5s;}
		.zhanlan img:hover{-webkit-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);}
		.zhanlan .tag{position: absolute;float: right;padding: 9px 20px;background: #e51b1b;color: #fff;}
		.ttadd p{float: left;max-height: 83%}
		.ttadd div{float: right;width:60px;text-align: center; height:40px;background: #ff5400;    position: relative;
    top: -30px;padding-top:15px;color: #fff;font-weight: 700}
    .ttadd div a{color: #fff}
	</style>
</head>
<body>
<div class="huodong"  >
	<div class="zhanlan"><p class="tag">展会</p><a href=""><img src="1.jpg" alt="2023昆山国际车展"><h3>2023昆山国际车展</h3> </a> <div class="ttadd"><p><b>时间：</b>2023年10月27日 - 10月30日 </p><p><b>地点：</b> 昆山国际会展中心</p><div><a href=""> 详情</a> </div></div></div>
	<div class="zhanlan"><p class="tag">展会</p><a href=""><img src="1.jpg" alt="2023昆山国际车展"><h3>2023昆山国际车展</h3> </a> <div class="ttadd"><p><b>时间：</b>2023年10月27日 - 10月30日 </p><p><b>地点：</b> 昆山国际会展中心</p><div><a href=""> 详情</a> </div></div></div>
	<div class="zhanlan"><p class="tag">展会</p><a href=""><img src="1.jpg" alt="2023昆山国际车展"><h3>2023昆山国际车展</h3> </a> <div class="ttadd"><p><b>时间：</b>2023年10月27日 - 10月30日 </p><p><b>地点：</b> 昆山国际会展中心</p><div><a href=""> 详情</a> </div></div></div>
	<div class="zhanlan"><p class="tag">展会</p><a href=""><img src="1.jpg" alt="2023昆山国际车展"><h3>2023昆山国际车展</h3> </a> <div class="ttadd"><p><b>时间：</b>2023年10月27日 - 10月30日 </p><p><b>地点：</b> 昆山国际会展中心</p><div><a href=""> 详情</a> </div></div></div>
	 
</div>
</body>
</html>