HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
<title>card</title>
<link href="https://fonts.googleapis.com/css…" rel="stylesheet">
<script>
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
</script>
<style>
a {
color: #555;
text-decoration: none;
}
a:focus{outline: 10px dotted;}
.card {
background: #eee;
display: block;
height: 100px;
width: 70px;
border: 1px solid #898;
position: relative;
border-radius: 4px;
padding: 4px;
text-align: center;
font-size: 10px;
}
.card:after {
position: absolute;
line-height: 1;
display: block;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #fafafa;
content: "\2665";
white-space: pre;
line-height: 100px;
text-align: center;
backface-visibility: visible;
border-radius: 4px;
border: 1px solid #898;
text-shadow: 30px -40px 0 red, -30px -40px red, 30px 50px 0 red, -30px 50px red;
color: red;
}
* {
padding: 0;
margin: 0;
}
.card:hover::after {
transform: translateY(16px);
backface-visibility: hidden;
transition: 1s ease;
box-shadow: 0 5px 5px 0 #555;
}
.card a {
pointer-events: none;
}
#wra {
background: #333;
width: calc(100%-6px);
display: block;
margin: 0 auto;
position: relative;
height: calc(100%-6px);
overflow: hidden;
}
#magics{
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
color: #fff;
height: 50px;
padding: 0 20%;
}
#magics a{
display: block;
height: 50px;
line-height: 50px;
}
.grid {
pointer-events: none;
counter-reset: section;
display: grid;
grid-template-rows: repeat(6, calc(100vh/6));
grid-template-columns: repeat(6, 1fr);
justify-content: center;
align-content: center;
perspective: calc(100vw);
perspective-origin: 50% 50%;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
.grid li {
pointer-events: auto;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 4px;
position: relative;
list-style: none;
background: #ffa;
box-shadow: 0 0 0 1px #555 inset, 0 0 2px 2px #aaa;
font-size: 10px;
overflow: hidden;
background-image: url("http://oi63.tinypic.com/2cylbma.jpg");
background-size: 100vw 100vh;
margin: 6px 0 0 6px;
}
.grid a {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background: #aaa;
position: absolute;
top: 0;
}
.grid li:after {
counter-increment: section;
content: counter(section);
margin: 6px;
display: block;
position: absolute;
top: 0;
left: 0;
}
.hide {
animation: hides 1s linear forwards;
}
.visi {
animation: visib 1s ease forwards;
backface-visibility: hidden;
}
.grid li:nth-child(1){
background-position: 0 0;
}
.grid li:nth-child(2){
background-position: 20% 0;
}
.grid li:nth-child(3){
background-position: 40% 0;
}
.grid li:nth-child(4){
background-position: 60% 0;
}
.grid li:nth-child(5){
background-position: 80% 0;
}
.grid li:nth-child(6){
background-position: 100% 0;
}
.grid li:nth-child(7){
background-position: 0 20%;
}
.grid li:nth-child(8){
background-position: 20% 20%;
}
.grid li:nth-child(9){
background-position: 40% 20%;
}
.grid li:nth-child(10){
background-position: 60% 20%;
}
.grid li:nth-child(11){
background-position: 80% 20%;
}
.grid li:nth-child(12){
background-position: 100% 20%;
}
.grid li:nth-child(13){
background-position: 0 40%;
}
.grid li:nth-child(14){
background-position: 20% 40%;
}
.grid li:nth-child(15){
background-position: 40% 40%;
}
.grid li:nth-child(16){
background-position: 60% 40%;
}
.grid li:nth-child(17){
background-position: 80% 40%;
}
.grid li:nth-child(18){
background-position: 100% 40%;
}
.grid li:nth-child(19){
background-position: 0 60%;
}
.grid li:nth-child(20){
background-position: 20% 60%;
}
.grid li:nth-child(21){
background-position: 40% 60%;
}
.grid li:nth-child(22){
background-position: 60% 60%;
}
.grid li:nth-child(23){
background-position: 80% 60%;
}
.grid li:nth-child(24){
background-position: 100% 60%;
}
.grid li:nth-child(25){
background-position: 0 80%;
}
.grid li:nth-child(26){
background-position: 20% 80%;
}
.grid li:nth-child(27){
background-position: 40% 80%;
}
.grid li:nth-child(28){
background-position: 60% 80%;
}
.grid li:nth-child(29){
background-position: 80% 80%;
}
.grid li:nth-child(30){
background-position: 100% 80%;
}
.grid li:nth-child(31){
background-position: 0 100%;
}
.grid li:nth-child(32){
background-position: 20% 100%;
}
.grid li:nth-child(33){
background-position: 40% 100%;
}
.grid li:nth-child(34){
background-position: 60% 100%;
}
.grid li:nth-child(35){
background-position: 80% 100%;
}
.grid li:nth-child(36){
background-position: 100% 100%;
}
@keyframes visib{
50%{display:block;visibility: hidden;}
100%{display:block;visibility: hidden;}
}
@keyframes hides{
0%{transform:rotateY(-180deg);z-index:1;}
100%{transform:rotateY(0);z-index:1;}
}
</style>
</head>
<body>
<div id="wra">
<div id="magics"><a href="#">THE LINK :)</a>
I was testing grid and noticed when grid is over links do not working then added to css pointer-events: none; to parent element and pointer-events: auto; to children element and then link started working.
</div>
<ul class="grid">
</ul>
</div>
<script>
"use strict";
(function(){
const grid = document.querySelector(".grid");
grid.innerHTML = "<li><a href=\"#\">Click</a></li>".repeat(36);
grid.addEventListener("click", function(el){
let{target} = hide;
if(el.target !== this)
hide(el.target);
});
function hide(el){
if(el.parentElement.tagName !== "UL"){
el.parentElement.classList.toggle("hide");
}
el.classList.toggle("visi");
insertText(el);
}
const arr = ["YES", "IMAGE", "OK"];
function textRandomFromArray(arr){
let arrLenth = arr.length;
let textIndex = Math.floor(Math.random()*arrLenth);
console.log(textIndex);
return arr[textIndex];
}
function insertText(i){
return i.innerText = textRandomFromArray(arr);
}
document.getElementById("magics").style.display = "none";
for (let i = 0; i < grid.childNodes.length; ++i) {
(function(n) {
setTimeout(function(){
if(grid.childNodes.length-1 === n){
document.getElementById("magics").style.display = "block";
grid.childNodes[19].classList.toggle("visi");
grid.childNodes[20].classList.toggle("visi");
grid.childNodes[21].classList.toggle("visi");
grid.childNodes[22].classList.toggle("visi");
grid.childNodes[15].classList.toggle("visi");
grid.childNodes[14].classList.toggle("visi");
}
grid.childNodes[n].classList.toggle("hide");
grid.childNodes[n].querySelector('a').classList.toggle("visi");
}, n*100);
}(i));
}
}());
</script>
</body>
</html>
