JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cms-element-text">
  <div class="body-selection-item">
    <a title="Deckenleuchten" href="/Leuchten/Deckenleuchten/">
    <div style="background-image:url(https://images.unsplash.com/photo-1657053543559-5845ec792c0e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3351&q=80);" class="body-selection-item-image"></div>
    <div class="body-selection-item-text">MY TEXT-BOX</div>
    </a>
  </div>
</div>

CSS

.cms-section-default.boxed [class*="cms-element"] {
    border-radius: 3px;
}
.body-selection-item {
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0.8em 0.5em 0.2em 0.5em;
    text-align: center;
    -ms-flex-positive: 1;
    flex-grow: 1;
    background-color: white;
    border: 1px solid #b2b2b2;
}
.body-selection-item-image:hover {
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.body-selection-item-image {
    overflow: hidden;
    transition: -ms-transform .5s ease;
    transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
    -webkit-transition: -webkit-transform .5s ease;
}
.body-selection-item-image {
    height: 15rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
}
.body-selection-item-text {
    font-size: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0.5em;
    background: #1f1f1f;
    color: #fff;
}