div+css实现带图片放大的自适应响应式图片瀑布流相册效果代码-html代码-BFW代码库

div+css实现带图片放大的自适应响应式图片瀑布流相册效果代码

代码语言：html

所属分类：瀑布流

代码描述：div+css实现带图片放大的自适应响应式图片瀑布流相册效果代码，鼠标左键单击不放可放大指定图片。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">


    <style>
        * { 
                box-sizing: border-box; 
                transition: all 0.125s ease 0s;
        }
        
        body {
                margin: 0;
                padding: 0;
                background: #fff;
        }
        
        body:before, body:after {
                content: "IMAGES GALLERY";
                position: absolute;
                top: 0px;
                color: #00000000;
                left: 50%;
                transform: translateX(-50%);
                text-shadow: 0 -1px 1px #000000ab, 0 1px 1px #ffffff82;
                font-family: Arial, serif;
                padding: 2px 10px;
                border-radius: 2px;
                font-size: 9px;
                display: flex;
                align-items: flex-end;
                line-height: 14px;
        }
        
        body:after {
                top: inherit;
                bottom: 0;
                position: relative;
                margin-top: -12px;
                transform: translateX(-100%);
                margin-left: 90px;
                width: 150px;
        }
        
        img { 
                width: 100%;
        }
        
        .gallery {
                display: flex;
                padding: 5px;
                flex-wrap: wrap;
        }
        
        .column {
                flex: 25%;
                padding: 5px;
        
        }
        
        .column img {
                margin-top: 5px;
                cursor: pointer;
    .........完整代码请登录后点击上方下载按钮下载查看