KettLovahr/index.html Secret

## index.html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Card Hover</title>
    </head>
    <body>
        <div id="container">
            <a href="https://racc.at/" class="stamp">
                <img src="./stamps/kett.png" />
            </a>
            <a href="https://beepi.ng/" class="stamp">
                <img src="./stamps/unnick.webp" />
            </a>
            <a href="https://freeplay.floof.company/" class="stamp">
                <img src="./stamps/freeplay.gif" />
            </a>
            <a href="https://pencilvoid.neocities.org/" class="stamp">
                <img src="./stamps/pencilvoid.png" />
            </a>
            <a href="https://cyrneko.eu/" class="stamp">
                <img src="./stamps/cyrneko.png" />
            </a>
            <a href="https://wetdry.world/" class="stamp">
                <img src="./stamps/wetdryworld.png" />
            </a>
        </div>
    </body>

    <script src="script.js"></script>
</html>

## script.js
stamps = document.getElementsByClassName("stamp");

for (let i = 0; i < stamps.length; i++) {
  el = stamps[i];

  el.onmouseenter = function () {
    this.classList.add("hovered");
  };

  el.onmouseleave = function () {
    this.classList.remove("hovered");
    this.children[0].style.transform = "";
    this.children[0].style.filter = "none";
  };

  el.onmousemove = function (e) {
    if (this.classList.contains("hovered")) {
      rect = this.getBoundingClientRect();
      xoff = ((e.clientX - rect.left - rect.width / 2) / rect.width) * 2;
      yoff = ((e.clientY - rect.top - rect.height / 2) / rect.height) * 2;
      transform = `translate3d(0, 0, 3.0cm) rotate3d(${-yoff}, ${xoff}, 0, ${Math.sqrt(xoff * xoff + yoff * yoff) * 30}deg)`;
      this.children[0].style.transform = transform;
      this.children[0].style.filter = `brightness(${1.0 - yoff / 4 - xoff / 4})`;
    }
  };
}

## style.css
* {
    box-sizing: border-box;
}

body {
    background-color: #20262f;
    display: block;
    margin: 0;
}

#container {
    background-color: #30363f;

    width: 800px;
    height: 450px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    justify-content: center;
    align-items: center;
}

.stamp {
    perspective: 10cm;
    display: block;
    background-color: #60666f;
    width: 88px;
    height: 31px;

    position: relative;
    z-index: 0;
}

.stamp:hover {
    z-index: 1000;
}

.stamp img {
    transition-duration: 0.1s;
    image-rendering: pixelated;
    position: static;
    transform-style: preserve-3d;
}

.stamp img:hover {
    filter: brightness(1.1);
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="style.css" />
	<title>Card Hover</title>
	</head>
	<body>
	<div id="container">
	<a href="https://racc.at/" class="stamp">
	<img src="./stamps/kett.png" />
	</a>
	<a href="https://beepi.ng/" class="stamp">
	<img src="./stamps/unnick.webp" />
	</a>
	<a href="https://freeplay.floof.company/" class="stamp">
	<img src="./stamps/freeplay.gif" />
	</a>
	<a href="https://pencilvoid.neocities.org/" class="stamp">
	<img src="./stamps/pencilvoid.png" />
	</a>
	<a href="https://cyrneko.eu/" class="stamp">
	<img src="./stamps/cyrneko.png" />
	</a>
	<a href="https://wetdry.world/" class="stamp">
	<img src="./stamps/wetdryworld.png" />
	</a>
	</div>
	</body>

	<script src="script.js"></script>
	</html>
	stamps = document.getElementsByClassName("stamp");

	for (let i = 0; i < stamps.length; i++) {
	el = stamps[i];

	el.onmouseenter = function () {
	this.classList.add("hovered");
	};

	el.onmouseleave = function () {
	this.classList.remove("hovered");
	this.children[0].style.transform = "";
	this.children[0].style.filter = "none";
	};

	el.onmousemove = function (e) {
	if (this.classList.contains("hovered")) {
	rect = this.getBoundingClientRect();
	xoff = ((e.clientX - rect.left - rect.width / 2) / rect.width) * 2;
	yoff = ((e.clientY - rect.top - rect.height / 2) / rect.height) * 2;
	transform = `translate3d(0, 0, 3.0cm) rotate3d(${-yoff}, ${xoff}, 0, ${Math.sqrt(xoff * xoff + yoff * yoff) * 30}deg)`;
	this.children[0].style.transform = transform;
	this.children[0].style.filter = `brightness(${1.0 - yoff / 4 - xoff / 4})`;
	}
	};
	}
	* {
	box-sizing: border-box;
	}

	body {
	background-color: #20262f;
	display: block;
	margin: 0;
	}

	#container {
	background-color: #30363f;

	width: 800px;
	height: 450px;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	display: flex;
	flex-wrap: wrap;
	gap: 10px;

	justify-content: center;
	align-items: center;
	}

	.stamp {
	perspective: 10cm;
	display: block;
	background-color: #60666f;
	width: 88px;
	height: 31px;

	position: relative;
	z-index: 0;
	}

	.stamp:hover {
	z-index: 1000;
	}

	.stamp img {
	transition-duration: 0.1s;
	image-rendering: pixelated;
	position: static;
	transform-style: preserve-3d;
	}

	.stamp img:hover {
	filter: brightness(1.1);
	}