1、html

<div class="gallery cf">
    <div>
        <img src="//blog.blonglee.me/Uploads/image/20181204/20181204053658_67859.jpg" height="244">
    </div>
    <div>
        <img src="//blog.blonglee.me/Uploads/image/20181204/20181204062420_75711.jpg" height="244">
    </div>
    <div>
        <img src="//blog.blonglee.me/Uploads/image/20190326/20190326141748_24382.png">
    </div>
    <div>
        <img src="//blog.blonglee.me/Uploads/image/20190318/20190318110932_51767.png" height="244">
    </div>
    <div>
        <img src="//blog.blonglee.me/Uploads/image/20190312/20190312132643_84124.png" height="244">
    </div>
    <div>
        <img src="//blog.blonglee.me/Uploads/image/20190304/20190304131052_34919.png" height="244">
    </div>
</div>

<div style="text-align:center;clear:both;">

2、css

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body {
    font:14px/1 Lato,sans-serif;
    color:#555;
    background:#eee;
}
.gallery {
    width:790px;
    margin:30px auto;
    padding:5px;
    background:#333;
}
.gallery > div {
    position:relative;
    float:left;
    padding:5px;
}
.gallery > div > img {
    width:250px;
    transition:.1s transform;
    transform:translateZ(0);
}
.gallery > div:hover {
    z-index:1;
}
.gallery > div:hover > img {
    transform:scale(1.5,1.5);
    transition:.3s transform;border: 1px solid rgba(236,236,236,1.00);
}
.cf:before,.cf:after {
    display:table;
    content:"";
    line-height:0;
}
.cf:after {
    clear:both;
}
h1 {
    margin:40px 0;
    font-size:24px;
    text-align:center;
    text-transform:uppercase;
}
footer {
    margin:80px 0;
    text-align:center;
}

运行效果图：