美食图片边框设计简约
body {
fontfamily: Arial, sansserif;
backgroundcolor: f8f8f8;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 20px auto;
display: grid;
gridtemplatecolumns: repeat(autofit, minmax(250px, 1fr));
gap: 20px;
}
.imagecontainer {
position: relative;
overflow: hidden;
borderradius: 10px;
boxshadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.imagecontainer img {
width: 100%;
display: block;
borderradius: 10px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
backgroundcolor: rgba(0, 0, 0, 0.3);
color: fff;
display: flex;
justifycontent: center;
alignitems: center;
opacity: 0;
transition: opacity 0.3s;
}
.imagecontainer:hover .overlay {
opacity: 1;
}
h2 {
margin: 0;
}