html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="all">
<div class="Title">
<h1>星星的电子相册</h1>
</div>
<div class="photo_block">
<img class="img1" src="./images/1.jpg" title="烤鲈鱼">
<div class="image__overlay1">
烤鲈鱼
</div>
<img src="./images/2.jpg">
<div class="image__overlay2">
牛蛙煲
</div>
<img src="./images/3.jpg">
<div class="image__overlay3">
北门小炒
</div>
<img src="./images/4.jpg">
<div class="image__overlay4">
蛋黄鸡翅
</div>
<img src="./images/5.jpg">
<div class="image__overlay5">
肉蟹煲
</div>
<img src="./images/6.jpg">
<div class="image__overlay6">
烧烤
</div>
<img src="./images/7.jpg">
<div class="image__overlay7">
kfc的炸鸡
</div>
<img src="./images/8.jpg">
<div class="image__overlay8">
鸡公煲
</div>
</div>
</body>
</html>
css:
* {
margin: 0;
box-sizing: border-box;
transition: all .4s;
}
body {
background-color: rgb(255, 215, 198);
background-image: url(images/back.jpg);
background-size: cover;
}
.all {
max-width: 100%;
min-height: 100%;
padding: 30px 10% 30px 10%;
}
.Title {
text-align: center;
font-family: "HPE";
color: rgb(70, 39, 6);
padding-top: 40px;
padding-bottom: 25px;
}
.photo_block {
display: flex;
justify-content: center;
align-content: center;
align-items: center;
flex-wrap: wrap;
}
.photo_block img {
/* border :15px 5px 5px 5px solid white; */
border-top: 8px solid white;
border-right: 8px solid white;
border-left: 8px solid white;
border-bottom: 20px solid white;
box-shadow: 4px 4px rgba(87, 87, 87, 0.349);
margin: 25px 2%;
width: 250px;
border-radius: .2em;
box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
}
.photo_block img:hover {
transform: scale(1.3);
transition: all .2s;
transform: all 0.2s ease-in-out;
transition: all 2s ease 0s;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
/* filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-webkit-filter: blur(2px); */
}
.image__overlay1 {
position: absolute;
top: 172px;
left: 275px;
width: 236px;
height: 174px;
background: rgba(255, 184, 97, 0.28);
color: #ffffff;
font-family: 'Quicksand', sans-serif;
font-size: x-large;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.25s;
opacity: 0;
}
.image__overlay1:hover {
opacity: 1;
}
.img1:hover .word {
transition: 0.3s ease-in-out;
opacity: 1;
}
img:hover {
cursor: pointer;
}
.big {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 2;
width: 100%;
height: 100%;
display: none;
}
.image__overlay2 {
position: absolute;
top: 172px;
left: 580px;
width: 236px;
height: 174px;
background: rgba(255, 184, 97, 0.28);
color: #ffffff;
font-family: 'Quicksand', sans-serif;
font-size: x-large;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.25s;
opacity: 0;
}
.image__overlay2:hover {
opacity: 1;
}
.image__overlay3 {
position: absolute;
top: 172px;
left: 885px;
width: 236px;
height: 174px;
background: rgba(255, 184, 97, 0.28);
color: #ffffff;
font-family: 'Quicksand', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.25s;
opacity: 0;
}
.image__overlay3:hover {
opacity: 1;
}
.image__overlay4 {
position: absolute;
top: 172px;
left: 1187px;
width: 236px;
height: 174px;
background: rgba(255, 184, 97, 0.28);
color: #ffffff;
font-family: 'Quicksand', sans-serif;
font-size: x-large;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.25s;
opacity: 0;
}
.image__overlay4:hover {
opacity: 1;
}
.image__overlay5 {
position: absolute;
top: 425px;
left: 275px;
width: 236px;
height: 174px;
background: rgba(255, 184, 97, 0.28);
color: #ffffff;
font-family: 'Quicksand', sans-serif;
font-size: x-large;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.25s;
opacity: 0;
}
.image__overlay5:hover {
opacity: 1;
}
.image__overlay6 {
position: absolute;
top: 425px;
left: 580px;
width: 236px;
height: 174px;
font-size: x-large;
background: rgba(255, 184, 97, 0.28);
font-size: x-large;
color: #ffffff;
font-family: 'Quicksand', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.25s;
opacity: 0;
}
.image__overlay6:hover {
opacity: 1;
}
.image__overlay7 {
position: absolute;
top: 425px;
left: 885px;
width: 236px;
height: 174px;
font-size: x-large;
background: rgba(255, 184, 97, 0.28);
color: #ffffff;
font-family: 'Quicksand', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.25s;
opacity: 0;
}
.image__overlay7:hover {
opacity: 1;
}
.image__overlay8 {
position: absolute;
top: 425px;
left: 1188px;
width: 236px;
height: 174px;
font-size: x-large;
background: rgba(255, 184, 97, 0.28);
color: #ffffff;
font-family: 'Quicksand', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.25s;
opacity: 0;
}
.image__overlay8:hover {
opacity: 1;
}
.num1 ul {
/* 设置相片信息的样式 */
margin: -5px 0 0 0px;
padding: 0 0 0 0.5em;
background: #dceeff;
border: 2px solid #a7d5ff;
font-size: 12px;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
display: none;
}