title
Remember YUGOP
body { font-family: sans-serif; font-size: 14px; height: 100vh; background: #000; color: #fff; display: flex; justify-content: center; align-items: center; } #toggle { position: absolute; top: 0; right: 0; padding: 0.35em 0.6em 0.45em 0.6em; margin: 1.6em; border: 1px solid; cursor: pointer; border-radius: 2px; } #toggle:before { content: "Show grid"; } #toggle:active { top: 2px; } #toggle.visible:before { content: "Hide grid"; } #grid { display: grid; width: 100vh; height: 100vh; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; grid-gap: 0; counter-reset: section; } #grid div { background: url(https://i.imgur.com/DAWm34h.jpg) no-repeat; background-size: 500% 500%; display: flex; justify-content: center; align-items: center; } #grid div.visible:before { counter-increment: section; content: counter(section); } #grid div.visible { outline: 1px solid #fff; } #grid div:nth-of-type(1) { background-position: 0 0; } #grid div:nth-of-type(2) { background-position: 25% 0; } #grid div:nth-of-type(3) { background-position: 50% 0; } #grid div:nth-of-type(4) { background-position: 75% 0; } #grid div:nth-of-type(5) { background-position: 100% 0; } #grid div:nth-of-type(6) { background-position: 0 25%; } #grid div:nth-of-type(7) { background-position: 25% 25%; } #grid div:nth-of-type(8) { background-position: 50% 25%; } #grid div:nth-of-type(9) { background-position: 75% 25%; } #grid div:nth-of-type(10) { background-position: 100% 25%; } #grid div:nth-of-type(11) { background-position: 0 50%; } #grid div:nth-of-type(12) { background-position: 25% 50%; } #grid div:nth-of-type(13) { background-position: 50% 50%; } #grid div:nth-of-type(14) { background-position: 75% 50%; } #grid div:nth-of-type(15) { background-position: 100% 50%; } #grid div:nth-of-type(16) { background-position: 0 75%; } #grid div:nth-of-type(17) { background-position: 25% 75%; } #grid div:nth-of-type(18) { background-position: 50% 75%; } #grid div:nth-of-type(19) { background-position: 75% 75%; } #grid div:nth-of-type(20) { background-position: 100% 75%; } #grid div:nth-of-type(21) { background-position: 0 100%; } #grid div:nth-of-type(22) { background-position: 25% 100%; } #grid div:nth-of-type(23) { background-position: 50% 100%; } #grid div:nth-of-type(24) { background-position: 75% 100%; } #grid div:nth-of-type(25) { background-position: 100% 100%; }
var lines = false; $("#grid").mousemove(function(event) { var leftPer = (event.clientX - $("#grid").offset().left) / $("#grid").width(); var topPer = (event.clientY - $("#grid").offset().top) / $("#grid").height(); colStr = ""; rowStr = ""; for (i = 0; i < 5; i++) { nearX = 1 - Math.abs(leftPer - (0.1 + 0.2 * i)); colStr += " " + (1 + Math.pow(nearX * 5, 2)) + "fr"; } for (j = 0; j < 5; j++) { nearY = 1 - Math.abs(topPer - (0.1 + 0.2 * j)); rowStr += " " + (1 + Math.pow(nearY * 5, 2)) + "fr"; } $("#grid").css("grid-template-rows", rowStr); $("#grid").css("grid-template-columns", colStr); }); $("#toggle").click(function() { $("#grid div").toggleClass("visible"); $(this).toggleClass("visible"); });
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code