css3中设置的img：hover不起作用
想实现照片墙的效果，鼠标移动到图片上时图片放大等，不知道代码哪写错了，求指教html代码：<metahttp-equiv="Content-Type"content="t...
想实现照片墙的效果，鼠标移动到图片上时图片放大等，不知道代码哪写错了，求指教
html代码：
<meta http-equiv="Content-Type" content="text/html" charset="gb2312" />
<html>
<head>
<title>照片墙</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<img class="pic pic1" src="1.jpg">
<img class="pic pic2" src="2.jpg">
......
<img class="pic pic19" src="9.jpg">
<img class="pic pic20" src="10.jpg">
</div>
</body>
</html>
css代码：
*{
margin: 0;
padding: 0;
}
body{
background-color: #eeeeee;
}
.container{
width: 1000px;
height: 830px;
margin: 20px auto;
position: relative;
}
.pic{
width: 150px;
}
.container img: hover{
box-shadow: 15px 15px 14px rgba(50,50,50,0.4);
transform: rotate(0deg) scale(1.2);
-webkit-transform: rotate(0deg) scale(1.2);
-moz-transform: rotate(0deg) scale(1.2);
z-index: 2;
}
.container img{
padding: 3px;
background: white;
border: 1px solid #ddd;
box-shadow: 5px 5px 4px rgba(50,50,50,0.4);
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
position: absolute;
z-index: 1;
}
.pic1{
left: 100px;
top: 0;
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
}
.pic2{
left: 250px;
top: 50px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
}
.pic19{
left: 200px;
bottom: 150px;
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
.pic20{
left: 620px;
bottom: 100px;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
} 展开
html代码：
<meta http-equiv="Content-Type" content="text/html" charset="gb2312" />
<html>
<head>
<title>照片墙</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<img class="pic pic1" src="1.jpg">
<img class="pic pic2" src="2.jpg">
......
<img class="pic pic19" src="9.jpg">
<img class="pic pic20" src="10.jpg">
</div>
</body>
</html>
css代码：
*{
margin: 0;
padding: 0;
}
body{
background-color: #eeeeee;
}
.container{
width: 1000px;
height: 830px;
margin: 20px auto;
position: relative;
}
.pic{
width: 150px;
}
.container img: hover{
box-shadow: 15px 15px 14px rgba(50,50,50,0.4);
transform: rotate(0deg) scale(1.2);
-webkit-transform: rotate(0deg) scale(1.2);
-moz-transform: rotate(0deg) scale(1.2);
z-index: 2;
}
.container img{
padding: 3px;
background: white;
border: 1px solid #ddd;
box-shadow: 5px 5px 4px rgba(50,50,50,0.4);
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
position: absolute;
z-index: 1;
}
.pic1{
left: 100px;
top: 0;
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
}
.pic2{
left: 250px;
top: 50px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
}
.pic19{
left: 200px;
bottom: 150px;
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
.pic20{
left: 620px;
bottom: 100px;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
} 展开
1个回答
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
