JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-lg-4 col-md-6 col-sm-6 padding animated fadeIn index-gallery-item">
    	<div class="img-zoom-container">
    		<div class="img-zoom-item" style="background-image: url('http://via.placeholder.com/350x150');"></div>
    		<div class="img-zoom-overlay">
    			<h2><?= get_the_title(); ?></h2>
    			<a class="btn-img" href="#">Album ansehen</a>
    		</div>
    	</div>
    </div>
    <br>
     <div class="col-lg-4 col-md-6 col-sm-6 padding animated fadeIn index-gallery-item">
    	<div class="img-zoom-container borderbox">
    		<div class="img-zoom-item" style="background-image: url('http://via.placeholder.com/350x150');"></div>
    		<div class="img-zoom-overlay">
    			<h2><?= get_the_title(); ?></h2>
    			<a class="btn-img" href="#">Album ansehen</a>
    		</div>
    	</div>
    </div>

CSS

.index-gallery-item, .index-gallery-item > div {
        height: 250px;
        overflow: hidden;
    }
     
    .img-zoom-container {
        width: 20%;
        overflow: hidden;
        position: relative;
        background: #555;
        display: inline-block;
        cursor: pointer;
  
        padding: 15px;
    }
     
     .borderbox {
       box-sizing: border-box;
     }
     
    .img-zoom-item {
        width: 100%;
        height: 100%;
        background-color: black;
        background-position: center;
        background-size: cover;
        transition: all .5s;
    }