Imagebutton

Imagebutton

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;
    }
    
}