{ margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; min-height: 100%; } .container { position: flex; width: 100%; display: flex; justify-content: center; flex-wrap: wrap; transform-style: preserve-3d; perspective: 500px; margin: auto; } .container .box { position: flex; width: 275px; height: 275px; background: #ffffff; transition: 0.5s; transform-style: preserve-3d; overflow: hidden; margin-right: 15px; margin-top: 45px; } .container:hover .box { transform: rotateY(0deg); } .container .box:hover ~ .box { transform: rotateY(-0deg); } .container .box:hover { transform: rotateY(0deg) scale(1.25); z-index: 1; box-shadow: 0 25px 40px rgba(0,0,0,0); } .container .box .imgBx { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .container .box .imgBx:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0.9turn, #ffffff , #ffffff , #ffffff); z-index: 1; opacity: 0; transition: 1s; mix-blend-mode: luminosity; } .container .box:hover .imgBx:before { opacity: 0.5; } .container .box .imgBx img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .container .box .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: flex; padding: 20px; align-items: flex-end; box-sizing: border-box; } .container .box .content h2 { color: #000000; transition: 0.5s; text-transform: uppercase; margin-bottom: 5px; font-size: 20px; transform: translateY(200px); transition-delay: 0.3s; } .container .box:hover .content h2 { transform: translateY(0px); } .container .box .content p { color: #000000; transition: 0.5s; font-size: 14px; transform: translateY(200px); transition-delay: 0.4s; } .container .box:hover .content p { transform: translateY(0px); }
const texte = document.querySelector("h1"); const paragraphe = document.querySelector("h4"); document.addEventListener("mousemove", (event) => { const x = event.clientX; const y = event.clientY; const couleurR = Math.floor(x / window.innerWidth * 255); const couleurG = Math.floor(y / window.innerHeight * 255); const couleurB = Math.floor((x + y) / (window.innerWidth + window.innerHeight) * 255); texte.style.color = `rgb(${couleurR}, ${couleurG}, ${couleurB})`; paragraphe.style.color = `rgb(${couleurR}, ${couleurG}, ${couleurB})`; });