--- export interface Props { title: string link: string image: string } const { image, link, title } = Astro.props const icon: string = `background-image: url('/assets/technologies/${image}.webp')` --- <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}> <article> <div style={icon}> <span> <h2>{title}</h2> </span> </div> </article> </a> <style> a { text-decoration: none; } article { background-color: var(--c-darkergray); border-color: var(--c-darkgray); padding: 10px; text-align: center; transition: transform var(--speed) var(--ease); height: auto; width: auto; line-height: 100px; border-radius: 1.25rem; } article:hover { transform: scale(var(--hover-scale)); } article > div { border-radius: 1.25rem; display: flex; justify-content: center; align-items: center; background-size: contain; --size-value: 6.25rem; width: var(--size-value); height: var(--size-value); } article:hover span { border-radius: 1.25rem; padding: 0 0.5rem; display: flex; align-items: center; justify-content: center; text-align: center; background-color: var(--c-darkgray); height: calc(var(--size-value) + 0.1rem); width: calc(var(--size-value) + 0.1rem); opacity: 90%; } article:hover h2 { margin: 0; display: inline-flex; font-weight: bold; color: white; font-size: 18px; line-height: 150%; } article h2 { display: none; } article span { display: none; } </style>