https://ux.webchimp.nl/wp-admin/post.php?post=9934&action=edit&classic-editor
.imagebutton {
position: relative;
display: flex;
aspect-ratio: 1/1;
a {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&:after {
content: '';
background: var(--color-secondary);
inset: 50%;
position: absolute;
z-index: 2;
transition: .25s;
opacity: .9;
}
&:hover:after {
inset: var(--spacing-s);
z-index: 2;
}
}
&__image {
position: absolute;
z-index: 1;
inset: 0;
object-fit: cover;
width: 100%;
height: 100%;
}
&__header {
z-index: 4;
position: relative;
}
&__description {
z-index: 4;
position: relative;
}
}