CSS相册---------基于浮动+表格+过渡的应用

话不多说，上图片！！！！！！！！！

 产生效果：鼠标经过图片区域 ，图片实现放大的效果

思路：1.绘制表格 ；

        2.合并单元格；

        3.插入图片，调整图片

        4.设置过渡

        5.溢出隐藏

代码如下

html:

<div class="body">
        <div class="text">
            <h2>Our Gallery</h2>
            <p>There are many variations of passages of Lorem Ipsum available</p>

        </div>
        <div class="img-list">
            <table cellspacing="5px">
                <tr>
                    <td class="spa" colspan="2">
                        <img src="../image/gallery/gallery_01.jpg" alt="">
                    </td>
                    <td>
                        <img src="../image/gallery/gallery_02.jpg" alt="">
                    </td>
                </tr>
                <tr>
                    <td><img src="../image/gallery/gallery_03.jpg" alt=""></td>
                    <td><img src="../image/gallery/gallery_04.jpg" alt=""></td>
                    <td><img src="../image/gallery/gallery_05.jpg" alt=""></td>
                </tr>
                <tr>
                    <td><img src="../image/gallery/gallery_06.jpg" alt=""></td>
                    <td class="spa" colspan="2">
                        <img src="../image/gallery/gallery_07.jpg" alt="">
                    </td>
                </tr>
                <tr>
                    <td><img src="../image/gallery/gallery_08.jpg" alt=""></td>
                    <td><img src="../image/gallery/gallery_09.jpg" alt=""></td>
                    <td><img src="../image/gallery/gallery_10.jpg" alt=""></td>
                </tr>
            </table>

 CSS部分

.body {
    margin-top: 50px;
}

.body .text {
    margin-top: 30px;
}

.body h2 {
    height: 52px;
    margin: 0 auto 20px;
    color: tomato;
    font-family: 'Castellar';
    font-size: 52px;
    text-align: center;
    font-weight: 700;
}

.body .text p {
    padding-top: 5px;
    color: gray;
    font-size: 18px;
    text-align: center;
}

.img-list {
    margin-top: 50px;
    padding: 0 50px;
}

tr {
    height: 344px;
}

td {
    width: 450px;
    overflow: hidden;
}

td img {
    width: 450px;
    height: 344px;
    object-fit: cover;
    transition: all 2s;
}

.spa img {
    width: 900px;
    height: 344px;
    object-fit: cover;
    transition: all 2s;
}

td img:hover {
    transform: scale(2);
}

.spa :hover {
    transform: scale(2);
}