div+css实现带图片放大的自适应响应式图片瀑布流相册效果代码
代码语言:html
所属分类:瀑布流
代码描述:div+css实现带图片放大的自适应响应式图片瀑布流相册效果代码,鼠标左键单击不放可放大指定图片。
代码标签: 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; } .column img:active { height: auto; width: auto; max-width: 80%; position: fixed; left: 50%; top: 50%; border: 10px solid #fff; margin: 0px; box-shadow: 0 0 1000px 1000px #fff8; transform: translateX(-50%) translateY(-50%); } @media (max-width: 768px) { .column { flex: 50%; } } @media (max-width: 500px) { .column { flex: 100%; } } </style> </head> <body> <div class="gallery"> <div class="column"&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0