.htimage-container { /* border-radius and overflow applied inline */ }
.htimage-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.htimage-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: var(--bg-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: scale(1);
    opacity: 1;
}
.htimage-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - (var(--text-padding) * 2));
    padding: var(--text-padding);
    box-sizing: border-box;
    text-align: center;
    transition: opacity 0.5s ease;
    color: #000;
}
.htimage-text-1 { opacity: 1; }
.htimage-text-2 { opacity: 0; }
.htimage-container:hover .htimage-inner::before {
    transform: scale(var(--zoom-scale));
    opacity: var(--hover-opacity);
}
.htimage-container:hover .htimage-text-1 { opacity: 0; }
.htimage-container:hover .htimage-text-2 { opacity: 1; }