The link will show you what I’m trying to achieve
(this is not a real outcome. this video is a concept of my goal)
https://www.youtube.com/watch?v=U_MggL4-AMc
I could really do with a helping hand on this lol
(I need to be able to do this for MULTIPULE different gradients individually)
I’ve tried using Vars with colours and using a Event listener which worked somewhat in codepen with solid colours not gradients but didn’t work on my actual site. (this didn’t previously work for me.
I have now tried using background images to somewhat success. I’m now trying to figure out how I can go back and fourth with the theme colours as well as set the scale for the background retrieved by the script. (however I’d prefer the original method of changing gradient values on click)
<!DOCTYPE html>
<html>
<head>
<style>
#Background {
width: 1920px;
height: 1080px;
background-image: url("https://previews.dropbox.com/p/thumb/ACUv6h-QQ6PskOhByDXYwHCGjtk1ar3JN5ufhLEEwKxFAJvxxqUyCHMT-DMbK318IVJ_Zn2ustYtg-CcpEPp3egLeHMJoH_teEMKWVjtmw3VSeDvSJpwcqCk89QsDdKjbL4Q9cuPviRrw--RPRXN-uIDTcQYQfkyiQyQT0VMVN5FOwsblLq222dzHRW-YL9huPTGqgmWYNVOc36wpcNva2sVah0UVRLxjeSiGEbF4RPZijO2tp0kYovzRsuybNjkvHbxK4SgO_WGPjebe2Uh9OzoLmygGI-zItBzoqLk9dzLe0Bo6jMQr7v_8fDX3VnJpHNAOMZstzdmXlhQ_INGmlqaaCoTM175t6pYfVxUy_s2qxRotclVumgogKWY2RwUyqk/p.png");
}
.Embers-Theme-Card {
--perspective: 1400px;
--rotateX: 0;
--rotateY: 0;
--angle: 6.5deg;
position: relative;
display: grid;
place-content: center;
text-align: center;
box-shadow: rgba(0, 0, 0, 0.25) -20px 20px 20px 0px;
padding: 2rem;
aspect-ratio: 1 / 2;
background-image: url("http://localhost:10060/images/Embers.png");
background-size: cover;
transform: perspective(var(--perspective)) rotateX(var(--rotateX))
rotateY(var(--rotateY));
transition: transform 350ms ease;
width: 180px;
height: 75px;
border-radius: 20px;
left:800px;
Top: 100px;
}
.Embers-Theme-Card > :where(h1, p) {
background: rgba(221, 221, 221, 0.432);
margin: 0;
padding: 0.5rem;
}
.mouse-position-tracker {
position: absolute;
inset: 0;
}
.mouse-position-tracker > div {
position: absolute;
width: calc(100% / 3);
height: calc(100% / 3);
z-index: 2;
}
.Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(1):hover) {
--rotateX: var(--angle);
--rotateY: calc(var(--angle) * -1);
}
.Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(2):hover) {
--rotateX: var(--angle);
}
.Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(3):hover) {
--rotateX: var(--angle);
--rotateY: var(--angle);
}
.Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(4):hover) {
--rotateY: calc(var(--angle) * -1);
}
.Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(6):hover) {
--rotateY: var(--angle);
}
.Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(7):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: calc(var(--angle) * -1);
}
.Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(8):hover) {
--rotateX: calc(var(--angle) * -1);
}
.Embers-Theme-Card:has(.mouse-position-tracker > div:nth-child(9):hover) {
--rotateX: calc(var(--angle) * -1);
--rotateY: var(--angle);
}
/* 1st, 4th, 7th */
.mouse-position-tracker > div:nth-of-type(3n - 2) {
left: 0;
}
/* 2nd, 5th, 8th */
.mouse-position-tracker > div:nth-of-type(3n - 1) {
left: calc(100% / 3);
}
/* 3rd, 6th, 9th */
.mouse-position-tracker > div:nth-of-type(3n) {
right: 0;
}
/* 1-3 */
.mouse-position-tracker > div:nth-child(n + 1):nth-child(-n + 3) {
top: 0;
}
/* 4-6 */
.mouse-position-tracker > div:nth-child(n + 4):nth-child(-n + 6) {
top: calc(100% / 3);
}
/* 7-9 */
.mouse-position-tracker > div:nth-child(n + 7):nth-child(-n + 9) {
bottom: 0;
}
/* general styling */
:root {
--shadow: 0px 1px 2.2px rgba(0, 0, 0, 0.02),
0px 2.5px 5.3px rgba(0, 0, 0, 0.028), 0px 4.6px 10px rgba(0, 0, 0, 0.035),
0px 8.3px 17.9px rgba(0, 0, 0, 0.042), 0px 15.5px 33.4px rgba(0, 0, 0, 0.05),
0px 37px 80px rgba(0, 0, 0, 0.07);
}
.Embers-Theme-Card
{
cursor:pointer;
}
</style>
</head>
<body>
<div id="Background">
<div class="Embers-Theme-Card"<button onclick="myFunction()"></button>
<h1>Embers</h1>
<div class="mouse-position-tracker">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<script>
function myFunction() {
document.getElementById("Background").style.backgroundImage = "url(https://previews.dropbox.com/p/thumb/ACX0qlkI5_4X1wx38BE5OYUXzWxSZf1IDvUqHhiRXEWE8XbQf6t-OTWScbY8iUOJi1Zw-v0B89055hqh7J87eIpVkC3gfh4ceH5AATuzh95VVChO9wD1TDCYsgQN9Qc6XDWT2p9x3_BG8zhGu6tuaCxreeS_NJDzAa-W3VU38f7L0Ik2lrn-1KI19pu8caW2DkBL1aY7-QePYnjLvaYmGvCrk4ZUYu27ITHJMQYtJd_VsEwCyp3-CLABikGcO0gtaeo1GrhtAjKjC6QRxnmCz3A-uCbb-aF9aJyxkOs3Mues2Pi8H8PNhZ3sZ7pQqbqhChdgg4BvXJPUfeK5RZhWa6jxsXVgYnbTaqEjLWWO7ONvOw/p.png)";
}
</script>
</body>
</html>