The idea works, but here the whole point is that you need a transparent background, I put it on top and because of this the increase does not work, how can you beat it? here
.com-loop > h3 { color: white; position: absolute; text-align: center; top: 20%; width: 100%; z-index: 999; } .com-loop > p { bottom: 10%; color: white; font-size: 16px; position: absolute; text-align: center; width: 100%; z-index: 999; } .com-loop img { -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; transition: all 1s ease-out; } .com-loop img:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .t334__overlay { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } <div class="col-md-4 vtor-main"> <article > <div class="col-md-12 no-pad"> <a href="#" target="_blank"> <div class="com-loop"> <img style="width:100%; margin:0; padding:0" src="https://static.tildacdn.com/tild3033-3537-4462-b861-376663666364/blob.png" alt="<?php echo $image['alt']; ?>" /> <h3><span>Деловой центр</span></h3> <p>Аренда Продажа</p> </div> <div class="t334__overlay t334__animation_fast" style="background-image: -moz-linear-gradient(top, rgba(0,0,0,0.60), rgba(0,0,0,0.60)); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.60), rgba(0,0,0,0.60)); background-image: -o-linear-gradient(top, rgba(0,0,0,0.60), rgba(0,0,0,0.60)); background-image: -ms-linear-gradient(top, rgba(0,0,0,0.60), rgba(0,0,0,0.60));"></div> </a> </div> </article> </div> 
