@font-face { font-family: 'Inter'; src: url('./styles/fonts/Inter-SemiBold.ttf') format('truetype'); font-weight: 600; } @font-face { font-family: 'Inter'; src: url('./styles/fonts/Inter-ExtraBold.ttf') format('truetype'); font-weight: 800; } @font-face { font-family: 'Inter'; src: url('./styles/fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; } @font-face { font-family: 'Inter'; src: url('./styles/fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; } :root { padding: 0px; margin: 0px; box-sizing: border-box !important; } body { margin: 0px; } .image-container { position: relative; } .image-container img { position: absolute; left: 0; top: 0; transition: opacity 0.5s ease; /* Optional: adds a fade effect */ } .image-container .hover-image { opacity: 0; } .image-container:hover .hover-image { opacity: 1; } .image-container:hover .base-image { opacity: 0; }