div+css实现相册点击放大图片效果代码
代码语言:html
所属分类:画廊相册
代码描述:div+css实现相册点击放大图片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --pri: #ffffff; --sec: #212121; } * { box-sizing: border-box; margin: 0; } body { background-color: var(--pri); font-family: sans-serif; font-size: 3rem; } .grid-item { display: flex; align-items: center; justify-content: center; background-color: var(--sec); border-radius: 4px; transition: transform 0.3s ease-in-out; background-size: cover; background-position: center center; background-repeat: no-repeat; box-shadow: 1px 1px 3px 0 #0009; } .grid-item:hover { transform: scale(1.02); } .grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: minmax(180px, auto); gap: 20px; padding: 20px; grid-auto-flow: dense; } @media (min-width: 600px) { .wide { grid-column: span 2; } .tall { grid-row: span 2; } } .grid-item:nth-child(1), input#img-1:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/景色); } .grid-item:nth-child(2), input#img-2:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/湖); } .grid-item:nth-child(3), input#img-3:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/雪); background-position: 55% center; } .grid-item:nth-child(4), input#img-4:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/山); } .grid-item:nth-child(5), input#img-5:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/车); } .grid-item:nth-child(6), input#img-6:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/景色); } .grid-item:nth-child(7), input#img-7:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/石); } .grid-item:nth-child(8), input#img-8:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/海); background-position: 85% center; } .grid-item:nth-child(9), input#img-9:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/景色); } .grid-item:nth-child(10), input#img-10:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/景色); } .grid-item:nth-child(11), input#img-11:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/落日); } .grid-item:nth-child(12), input#img-12:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/景色); } .grid-item:nth-child(13), input#img-13:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/景色); background-position: 20% 50%; } .grid-item:nth-child(14), input#img-14:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/春天); } .grid-item:nth-child(15), input#img-15:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/景色); } .grid-item:nth-child(16), input#img-16:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/秋); } .grid-item:nth-child(17), input#img-17:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/景色); } .grid-item:nth-child(18), input#img-18:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/景色); } .grid-item:nth-child(19), input#img-19:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/景色); } .grid-item:nth-child(20), input#img-20:checked ~ .modal-window { background-image: url(//repo.bfw.wiki/random/800x600/风景); } /* MODAL */ input.modal-launcher { position: absolute; width: 100%; height: 100%; left: 0; top: 0; margin: 0; opacity: 0; cursor: pointer; display: none; } input.modal-launcher:checked { position: fixed; width: 30px; height: 30px; width: 100%; height: 100%; right: 0; top: 0; z-index: 3; left: inherit; display: block; } .modal-window { cursor: default; background: #F3F3F3; box-shadow: 0px 5px 10px 0px #333; position: fixed; z-index: 333; border-radius: 5px; display: none; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80vw; height: 80vh; /*overflow: hidden;*/ background-size: cover; background-position: center center; background-repeat: no-repeat; } .modal-overlay { background: #ffffff80; position: fixed; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; cursor: default; display: none; } .modal-overlay:before { content: ""; background: #fff; position: fixed; width: 1em; height: 1em; right: 30px; top: 30px; border-radius: 2px; } .modal-overlay:after { content: "\002B"; position: fixed; width: 0.8em; height: 0.8em; right: 30px; top: 30px; color: #333; font-size: 1.25em; line-height: 0.85em; text-align: center; transform: rotate(45deg); } input.modal-launcher:checked ~ .modal-window, input.modal-launcher:checked ~ .modal-window + .modal-overlay { display: block; } input.modal-launcher:checked:hover ~ .modal-window + .modal-overlay:before { background: #333; } input.modal-launcher:checked:hover ~ .modal-window + .modal-overlay:after { color: #fff; } .grid-item label { display: block; width: 100%; height: 100%; cursor: pointer; font-size: 18px; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; position: relative; } .grid-item label span { padding: 2px 8px; border-radius: 2px; color: var(--sec); background: var(--pri); mix-blend-mode: hard-light; opacity: 0.5; position: absolute; right: 10px; bottom: 10px; } .grid-item label:hover span { transition: all 0.35s ease 0s; opacity: 1; } .modal-window:before, .modal-window:after { content: ""; font-size: 22px; padding: 8px 18px 8px 55px; border-radius: 2px; color: var(--sec); opacity: 0.85; margin-left: -25px; } input#img-1:checked ~ .modal-window:before { content: "Toñin (7b)"; } input#img-2:checked ~ .modal-window:before { content: "Biafra (6a+/A2)"; } input#img-3:checked ~ .modal-window:before { content: "El clan de los osos (A2)"; } input#img-4:checked ~ .modal-window:before { content: "Gallego (V+)"; } input#img-5:checked ~ .modal-window:before { content: "Guirles-Campos (6b) y Gálvez-Pascual (6c)"; } input#img-6:checked ~ .modal-window:before { content: "Espolón Suroeste (6a+)"; } input#img-7:checked ~ .modal-window:before { content: "El blues de los ojos bonitos (V+/6a)"; } input#img-8:checked ~ .modal-window:before { content: "Oscar y Raúl (V+/6a)"; } input#img-9:checked ~ .modal-window:before { content: "Chimenea (Vº)"; } input#img-10:checked ~ .modal-window:before { content: "Normal (Ae)"; } input#img-11:checked ~ .modal-window:before { content: "Rápel"; } input#img-12:checked ~ .modal-window:before { content: "Mira un buho (V+)"; } input#img-13:checked ~ .modal-window:before { content: "Me pesa hasta el aire (A2?)"; } input#img-14:checked ~ .modal-window:before { content: "Rosario (V+)"; } input#img-15:checked ~ .modal-window:before { content: "Oscar y Raúl I (V+/6a)"; } input#img-16:checked ~ .modal-window:before { content: "Espiral (C1)"; } input#img-17:checked ~ .modal-window:before { content: "Diedro (V+)"; } input#img-18:checked ~ .modal-window:before { content: "Fisura Inés Rodriguez (6b)"; } input#img-19:checked ~ .modal-window:before { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0