js+css实现相册图片组成文字形状点击放大效果代码
代码语言:html
所属分类:图片放大
代码描述:js+css实现相册图片组成文字形状点击放大效果代码
代码标签: js css 相册 图片 组成 文字 形状 点击 放大
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #000; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; } .holder { position: absolute; width: 420px; height: 420px; } .gallery { position: absolute; top: 0; left: 0; width: 200px; height: 200px; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 2px; } .img { position: relative; width: 50px; height: 50px; overflow: hidden; transition: all 0.5s ease; filter: saturate(0); background-size: cover; } .img:hover { transform: scale(1.1); filter: saturate(1); } .img.fullpic { transform: none; pointer-events: auto; width: 400px; height: 400px; } .img0 { background-image: url("https://picsum.photos/800/800?random=0"); } .img1 { background-image: url("https://picsum.photos/800/800?random=1"); } .img2 { background-image: url("https://picsum.photos/800/800?random=2"); } .img3 { background-image: url("https://picsum.photos/800/800?random=3"); } .img4 { background-image: url("https://picsum.photos/800/800?random=4"); } .img5 { background-image: url("https://picsum.photos/800/800?random=5"); } .img6 { background-image: url("https://picsum.photos/800/800?random=6"); } .img7 { background-image: url("https://picsum.photos/800/800?ra.........完整代码请登录后点击上方下载按钮下载查看
网友评论0