位置敏感的照片盒子

点击网格中不同位置的照片，能以和该照片在网格中所处位置来自适应放大图片填充网格来展示图片。

grid, photo

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1364
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Cookie);
html {
    overflow: hidden;
    touch-action: none;
    content-zooming: none;
}
body {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #eee;
}
#screen {
    position: absolute;
    width: 445px;
    height: 335px;
    margin: auto;
    top: 0;
    bottom: 60px;
    left: 0;
    right: 0;
    background: #fff;
    transform: scale3d(1, 1, 1);
    -webkit-user-select: none;
    user-select: none;
    border-radius: 10px;
}
#screen img {
    position: absolute;
}
#screen input {
    display: none;
}
#screen input + label {
    position: absolute;
    width: 22%;
    height: 22%;
    overflow: hidden;
    transition: all 0.4s linear 0s;
    cursor: pointer;
    z-index: 1;
    border-radius: 5px;
}
#i01 + label {
    left: 3%;
    top: 3%;
}
#i02 + label {
    left: 27%;
    top: 3%;
}
#i03 + label {
    left: 51%;
    top: 3%;
}
#i04 + label {
    left: 75%;
    top: 3%;
}
#i05 + label {
    left: 3%;
    top: 27%;
}
#i06 + label {
    left: 27%;
    top: 27%;
}
#i07 + label {
    left: 51%;
    top: 27%;
}
#i08 + label {
    left: 75%;
    top: 27%;
}
#i09 + label {
    left: 3%;
    top: 51%;
}
#i10 + label {
    left: 27%;
    top: 51%;
}
#i11 + label {
    left: 51%;
    top: 51%;
}
#i12 + label {
    left: 75%;
    top: 51%;
}
#i13 + label {
    left: 3%;
    top: 75%;
}
#i14 + label {
    left: 27%;
    top: 75%;
}
#i15 + label {
    left: 51%;
    top: 75%;
}
#i16 + label {
    left: 75%;
    top: 75%;
}
#screen input:checked + label {
    width: 70%;
    height: 70%;
    z-index: 20000;
    transition: all 0.8s linear 0s;
}
#i01:checked + label {} #i02:checked + label {
    left: 3%;
}
#i03:checked + label {
    left: 27%;
}
#i04:checked + label {
    left: 27%;
}
#i05:checked + label {
    top: 3%;
}
#i06:checked + label {
    left: 3%;
    top: 3%;
}
#i07:checked + label {
    left: 27%;
    top: 3%;
}
#i08:checked + label {
    left: 27%;
    top: 3%;
}
#i09:checked + label {
    top: 27%;
}
#i10:checked + label {
    left: 3%;
    top: 27%;
}
#i11:checked + label {
    left: 27%;
    top: 27%;
}
#i12:checked + label {
    left: 27%;
    top: 27%;
}
#i13:checked + label {
    top: 27%;
}
#i14:checked + label {
    left: 3%;
    top: 27%;
}
#i15:checked + label {
    left: 27%;
    top: 27%;
}
#i16:checked + label {
    left: 27%;
    top: 27%;
}
#caption {
    position: absolute;
    width: 445px;
    height: 60px;
    left: 50%;
    top: 50%;
    margin-left: -222px;
    margin-top: 140px;
    color: #666;
    font-family: 'Cookie', cursive, georgia, times, serif;
    font-size: 1.8em;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
}
#caption b {
    font-size: 1.5em;
}

HTML

<input type="checkbox" id="i01" />
    <label for="i01"><img src="/uploads/160401/img1.jpeg" alt="one day in <b>early</b> autumn">
    </label>
    <input type="checkbox" id="i02" />
    <label for="i02"><img src="/uploads/160401/img1.jpeg" alt="detailing the raw <b>material</b>">
    </label>
    <input type="checkbox" id="i03" />
    <label for="i03"><img src="/uploads/160401/img2.jpeg" alt="waiting for the right <b>moment</b>">
    </label>
    <input type="checkbox" id="i04" />
    <label for="i04"><img src="/uploads/160401/img2.jpeg" alt="<b>carefully</b> weight the options">
    </label>
    <input type="checkbox" id="i05" />
    <label for="i05"><img src="/uploads/160401/img4.jpeg" alt="go <b>ahead</b>, I told myself">
    </label>
    <input type="checkbox" id="i06" />
    <label for="i06"><img src="/uploads/160401/img4.jpeg" alt="put <b>faith</b> to work">
    </label>
    <input type="checkbox" id="i07" />
    <label for="i07"><img src="/uploads/160401/img1.jpeg" alt="<b>rough</b> tension">
    </label>
    <input type="checkbox" id="i08" />
    <label for="i08"><img src="/uploads/160401/img1.jpeg" alt="mensuration, <b>prior</b> to meditation">
    </label>
    <input type="checkbox" id="i09" />
    <label for="i09"><img src="/uploads/160401/img2.jpeg" alt="taking a break <b>too</b> long">
    </label>
    <input type="checkbox" id="i10" />
    <label for="i10"><img src="/uploads/160401/img2.jpeg" alt="open to a <b>deep</b> breath, too">
    </label>
    <input type="checkbox" id="i11" />
    <label for="i11"><img src="/uploads/160401/img4.jpeg" alt="I fell for <b>you</b>">
    </label>
    <input type="checkbox" id="i12" />
    <label for="i12"><img src="/uploads/160401/img4.jpeg" alt="paradise could be <b>beneath</b>">
    </label>
    <input type="checkbox" id="i13" />
    <label for="i13"><img src="/uploads/160401/img1.jpeg" alt="<b>transmission</b>, essential">
    </label>
    <input type="checkbox" id="i14" />
    <label for="i14"><img src="/uploads/160401/img1.jpeg" alt="little, hardly any <b>nuance</b>">
    </label>
    <input type="checkbox" id="i15" />
    <label for="i15"><img src="/uploads/160401/img1.jpeg" alt="ends <b>meet</b> through thick and thin">
    </label>
    <input type="checkbox" id="i16" />
    <label for="i16"><img src="/uploads/160401/img1.jpeg" alt="I shall <b>resist</b>">
    </label>

</div>

<div id="caption">&middot; <b>click</b> &middot;</div>

点击网格中不同位置的照片，能以和该照片在网格中所处位置来自适应放大图片填充网格来展示图片。

grid, photo

编辑器支持Emmet

快捷键

点击网格中不同位置的照片，能以和该照片在网格中所处位置来自适应放大图片填充网格来展示图片。

grid, photo

基于Mansory构建的一款带运动效果的网格布局照片墙网页模板

Three.js 凸凹不平的盒子矩阵

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：