放大改进版~

单击放大，鼠标移至图片图片也放大。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>泡芙小姐</title>
		<link rel="stylesheet" type="text/css" href="css/ccc.css"/>
	</head>
	<body id="jiajian">
		<div class="tupian">
		<img src="img/1.jpg" alt />	
		</div>   
		<div id="jiajian">
			<a href="#jiajian" id="jian" class="fang">+</a>
			<a href="#" id="jia" class="suo">-</a>
		</div>
	</body>
</html>

css

*{
	padding: 0;
	margin: 0;
	border: none;
}
.suo{  
    position: fixed;  
    left: 47%;  
    bottom: 10%;  
    text-decoration: none;  
    color: #fff;  
    background-color: rgba(0,0,0,.5);  
    width: 60px;  
    height: 30px;  
    text-align: center;  
    line-height: 30px;  
    font-size: 50px;  
}  
.fang{  
    position: fixed;  
    left: 47%;  
    bottom: 10%;  
    text-decoration: none;  
    color: #fff;  
    background-color: rgba(0,0,0,.5);  
    width: 60px;  
    height: 30px;  
    text-align: center;  
    line-height: 30px;  
    font-size: 50px;  
}
.tupian{
	width: 658px;
	height: 548px;
	border: 3px solid #666;
	box-shadow: 0px 0px 10px 0 rgba(0,0,0,.8);
	margin: 50px auto;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
.suofang{
	text-decoration: none;
	color: #fff;
	background-color: rgba(0,0,0,.5);
	width: 60px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	display: inline-block;
	position: absolute;
	left: 658px;
	bottom: -30px;
	font-size: 50px;
}
.tupian img{
	transition: all .5s;
}
.tupian:hover img {
	transform: scale(1.5);
}
#jiajian:target img{  
    transition: all .5s;  
    -webkit-transform: scale(2);  
    -moz-transform: scale(2);  
    -ms-transform: scale(2);  
    -o-transform: scale(2);  
    transform: scale(2);  
}
#jian{
	display: block;
}
#jia{
	display: none;
}
#jiajian:target #jian{
	display: none;
}
#jiajian:target #jia{
	display: block;
}

posted on 2016-01-20 11:31 gcczhongduan 阅读(107) 评论(0) 收藏举报