HTML+CSS製作滑鼠懸浮上去可以放大的照片牆?
阿新 • • 發佈：2019-02-09
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>照片牆</title>
<script src="js/jquery.min.js"></script>
<style>
@charset "utf-8";
body {
background:gainsboro;/*背景顏色*/
}
.div_pic {
width:800px;
height:1000px;
margin:60px auto;
position:relative;
}
.p {
/*內邊距*/
padding:10px 10px 10px;
background:white;/*圖片白色背景*/
/*背景*/
/*左移，下移，虛化*/
box-shadow:5px 5px 4px rgba(50,50,50,0.5);/*圖片陰影*/
width:50px; /*圖片寬度*/
/*相對定位*/
}
/*滑鼠懸浮圖片變大*/
.div_pic img:hover {
transform:rotate(10deg) scale(1.5);
z-index:9;
}
.div_pic .a{
display: inline-block;
left: 50px;
}
.div_pic .a .a1{
margin-top: 60px;
}
.div_pic .b{
display: inline-block;
position: absolute;
left: 90px;
}
.div_pic .c{
display: inline-block;
position: absolute;
left: 180px;
}
.div_pic .d{
display: inline-block;
position: absolute;
left: 270px;
}
.div_pic .d .d1{
margin-top: 60px;
}
.div_pic .e{
display: inline-block;
position: absolute;
left: 360px;
}
.div_pic .e .e1{
margin-top: 120px;
}
.div_pic .f{
display: inline-block;
position: absolute;
left:450px;
}
.div_pic .f .f1{
margin-top: 60px;
}
.div_pic .g{
display: inline-block;
position: absolute;
left:540px;
}
.div_pic .g .g1{
margin-top: 0px;
}
.div_pic .h{
display: inline-block;
position: absolute;
left:630px;
}
.div_pic .h .h1{
margin-top: 0px;
}
.div_pic .i{
display: inline-block;
position: absolute;
left:720px;
}
.div_pic .i .i1{
margin-top: 60px;
}
</style>
</head>
<body>
<div class="div_pic">
<div class="a">
<div class="a1"><img class="p p1" src="images/7.jpg"></div>
<div class="a2"><img class="p p2" src="images/7.jpg"></div>
<div class="a3"><img class="p p3" src="images/7.jpg"></div>
<div class="a4"><img class="p p4" src="images/7.jpg"></div>
</div>
<div class="b">
<div class="b1"><img class="p p5" src="images/7.jpg"></div>
<div class="b2"><img class="p p6" src="images/8.jpg"></div>
<div class="b3"><img class="p p7" src="images/8.jpg"></div>
<div class="b4"><img class="p p8" src="images/8.jpg"></div>
<div class="b5"><img class="p p9" src="images/8.jpg"></div>
<div class="b6"><img class="p p10" src="images/7.jpg"></div>
</div>
<div class="c">
<div class="c1"><img class="p p11" src="images/7.jpg"></div>
<div class="c2"><img class="p p12" src="images/8.jpg"></div>
<div class="c3"><img class="p p13" src="images/9.jpg"></div>
<div class="c4"><img class="p p14" src="images/9.jpg"></div>
<div class="c5"><img class="p p15" src="images/9.jpg"></div>
<div class="c6"><img class="p p16" src="images/8.jpg"></div>
<div class="c7"><img class="p p17" src="images/7.jpg"></div>
</div>
<div class="d">
<div class="d1"><img class="p p18" src="images/7.jpg"></div>
<div class="d2"><img class="p p19" src="images/8.jpg"></div>
<div class="d3"><img class="p p20" src="images/9.jpg"></div>
<div class="d4"><img class="p p21" src="images/3.jpg"></div>
<div class="d5"><img class="p p22" src="images/9.jpg"></div>
<div class="d6"><img class="p p23" src="images/8.jpg"></div>
<div class="d7"><img class="p p24" src="images/7.jpg"></div>
</div>
<div class="e">
<div class="e1"><img class="p p25" src="images/7.jpg"></div>
<div class="e2"><img class="p p26" src="images/8.jpg"></div>
<div class="e3"><img class="p p27" src="images/9.jpg"></div>
<div class="e4"><img class="p p28" src="images/3.jpg"></div>
<div class="e5"><img class="p p29" src="images/9.jpg"></div>
<div class="e6"><img class="p p30" src="images/8.jpg"></div>
<div class="e7"><img class="p p31" src="images/7.jpg"></div>
</div>
<div class="f">
<div class="f1"><img class="p p32" src="images/7.jpg"></div>
<div class="f2"><img class="p p33" src="images/8.jpg"></div>
<div class="f3"><img class="p p34" src="images/9.jpg"></div>
<div class="f4"><img class="p p35" src="images/3.jpg"></div>
<div class="f5"><img class="p p36" src="images/9.jpg"></div>
<div class="f6"><img class="p p37" src="images/8.jpg"></div>
<div class="f7"><img class="p p38" src="images/7.jpg"></div>
</div>
<div class="g">
<div class="g1"><img class="p p39" src="images/7.jpg"></div>
<div class="g2"><img class="p p40" src="images/8.jpg"></div>
<div class="g3"><img class="p p41" src="images/9.jpg"></div>
<div class="g4"><img class="p p42" src="images/9.jpg"></div>
<div class="g5"><img class="p p43" src="images/9.jpg"></div>
<div class="g6"><img class="p p44" src="images/8.jpg"></div>
<div class="g7"><img class="p p45" src="images/7.jpg"></div>
</div>
<div class="h">
<div class="h1"><img class="p p46" src="images/7.jpg"></div>
<div class="h2"><img class="p p47" src="images/8.jpg"></div>
<div class="h3"><img class="p p48" src="images/8.jpg"></div>
<div class="h4"><img class="p p49" src="images/8.jpg"></div>
<div class="h6"><img class="p p51" src="images/8.jpg"></div>
<div class="h7"><img class="p p52" src="images/7.jpg"></div>
</div>
<div class="i">
<div class="i1"><img class="p p53" src="images/7.jpg"></div>
<div class="i2"><img class="p p54" src="images/7.jpg"></div>
<div class="i3"><img class="p p55" src="images/7.jpg"></div>
<div class="i4"><img class="p p56" src="images/7.jpg"></div>
</div>
</div>
<script>
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>照片牆</title>
<script src="js/jquery.min.js"></script>
<style>
@charset "utf-8";
body {
background:gainsboro;/*背景顏色*/
}
.div_pic {
width:800px;
height:1000px;
margin:60px auto;
position:relative;
}
.p {
/*內邊距*/
padding:10px 10px 10px;
background:white;/*圖片白色背景*/
/*背景*/
/*左移，下移，虛化*/
box-shadow:5px 5px 4px rgba(50,50,50,0.5);/*圖片陰影*/
width:50px; /*圖片寬度*/
/*相對定位*/
}
/*滑鼠懸浮圖片變大*/
.div_pic img:hover {
transform:rotate(10deg) scale(1.5);
z-index:9;
}
.div_pic .a{
display: inline-block;
left: 50px;
}
.div_pic .a .a1{
margin-top: 60px;
}
.div_pic .b{
display: inline-block;
position: absolute;
left: 90px;
}
.div_pic .c{
display: inline-block;
position: absolute;
left: 180px;
}
.div_pic .d{
display: inline-block;
position: absolute;
left: 270px;
}
.div_pic .d .d1{
margin-top: 60px;
}
.div_pic .e{
display: inline-block;
position: absolute;
left: 360px;
}
.div_pic .e .e1{
margin-top: 120px;
}
.div_pic .f{
display: inline-block;
position: absolute;
left:450px;
}
.div_pic .f .f1{
margin-top: 60px;
}
.div_pic .g{
display: inline-block;
position: absolute;
left:540px;
}
.div_pic .g .g1{
margin-top: 0px;
}
.div_pic .h{
display: inline-block;
position: absolute;
left:630px;
}
.div_pic .h .h1{
margin-top: 0px;
}
.div_pic .i{
display: inline-block;
position: absolute;
left:720px;
}
.div_pic .i .i1{
margin-top: 60px;
}
</style>
</head>
<body>
<div class="div_pic">
<div class="a">
<div class="a1"><img class="p p1" src="images/7.jpg"></div>
<div class="a2"><img class="p p2" src="images/7.jpg"></div>
<div class="a3"><img class="p p3" src="images/7.jpg"></div>
<div class="a4"><img class="p p4" src="images/7.jpg"></div>
</div>
<div class="b">
<div class="b1"><img class="p p5" src="images/7.jpg"></div>
<div class="b2"><img class="p p6" src="images/8.jpg"></div>
<div class="b3"><img class="p p7" src="images/8.jpg"></div>
<div class="b4"><img class="p p8" src="images/8.jpg"></div>
<div class="b5"><img class="p p9" src="images/8.jpg"></div>
<div class="b6"><img class="p p10" src="images/7.jpg"></div>
</div>
<div class="c">
<div class="c1"><img class="p p11" src="images/7.jpg"></div>
<div class="c2"><img class="p p12" src="images/8.jpg"></div>
<div class="c3"><img class="p p13" src="images/9.jpg"></div>
<div class="c4"><img class="p p14" src="images/9.jpg"></div>
<div class="c5"><img class="p p15" src="images/9.jpg"></div>
<div class="c6"><img class="p p16" src="images/8.jpg"></div>
<div class="c7"><img class="p p17" src="images/7.jpg"></div>
</div>
<div class="d">
<div class="d1"><img class="p p18" src="images/7.jpg"></div>
<div class="d2"><img class="p p19" src="images/8.jpg"></div>
<div class="d3"><img class="p p20" src="images/9.jpg"></div>
<div class="d4"><img class="p p21" src="images/3.jpg"></div>
<div class="d5"><img class="p p22" src="images/9.jpg"></div>
<div class="d6"><img class="p p23" src="images/8.jpg"></div>
<div class="d7"><img class="p p24" src="images/7.jpg"></div>
</div>
<div class="e">
<div class="e1"><img class="p p25" src="images/7.jpg"></div>
<div class="e2"><img class="p p26" src="images/8.jpg"></div>
<div class="e3"><img class="p p27" src="images/9.jpg"></div>
<div class="e4"><img class="p p28" src="images/3.jpg"></div>
<div class="e5"><img class="p p29" src="images/9.jpg"></div>
<div class="e6"><img class="p p30" src="images/8.jpg"></div>
<div class="e7"><img class="p p31" src="images/7.jpg"></div>
</div>
<div class="f">
<div class="f1"><img class="p p32" src="images/7.jpg"></div>
<div class="f2"><img class="p p33" src="images/8.jpg"></div>
<div class="f3"><img class="p p34" src="images/9.jpg"></div>
<div class="f4"><img class="p p35" src="images/3.jpg"></div>
<div class="f5"><img class="p p36" src="images/9.jpg"></div>
<div class="f6"><img class="p p37" src="images/8.jpg"></div>
<div class="f7"><img class="p p38" src="images/7.jpg"></div>
</div>
<div class="g">
<div class="g1"><img class="p p39" src="images/7.jpg"></div>
<div class="g2"><img class="p p40" src="images/8.jpg"></div>
<div class="g3"><img class="p p41" src="images/9.jpg"></div>
<div class="g4"><img class="p p42" src="images/9.jpg"></div>
<div class="g5"><img class="p p43" src="images/9.jpg"></div>
<div class="g6"><img class="p p44" src="images/8.jpg"></div>
<div class="g7"><img class="p p45" src="images/7.jpg"></div>
</div>
<div class="h">
<div class="h1"><img class="p p46" src="images/7.jpg"></div>
<div class="h2"><img class="p p47" src="images/8.jpg"></div>
<div class="h3"><img class="p p48" src="images/8.jpg"></div>
<div class="h4"><img class="p p49" src="images/8.jpg"></div>
<div class="h6"><img class="p p51" src="images/8.jpg"></div>
<div class="h7"><img class="p p52" src="images/7.jpg"></div>
</div>
<div class="i">
<div class="i1"><img class="p p53" src="images/7.jpg"></div>
<div class="i2"><img class="p p54" src="images/7.jpg"></div>
<div class="i3"><img class="p p55" src="images/7.jpg"></div>
<div class="i4"><img class="p p56" src="images/7.jpg"></div>
</div>
</div>
<script>
</script>
</body>
</html>