Сейчас у меня появляется при наведении текст, а как сделать, чтобы появлялся, когда картинка по центру
futurehd3fg.tilda.ws/page32407260.html
<style>
.img-hover-1,
.img-hover-1 .tn-atom,
.img-hover-1 img {
overflow:hidden;
transition:all .3s ease-in-out!important;
cursor:pointer;
}
.img-hover-1 > .tn-atom {
background: #000;
}
.img-hover-1:hover img {
transform: scale(1.1);
opacity: 0.4;
}
.img-hover-1:hover .content-layer-1 {
top:80%;
opacity:1;
}
.content-layer-1 {
position: absolute;
width: 100%;
height: 100%;
display: block;
left: 0;
top: 100%;
transition:all .3s ease-in-out!important;
opacity:0;
}
.content-layer-1 h3 {
font-family: 'CeraPro',Arial,sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 1;
color: #fff;
padding: 0% 5%;
}
.content-layer-1 p {
font-family: 'CeraPro',Arial,sans-serif;
line-height: 1.2;
font-size: 14px;
margin-top: 5px;
color: #fff;
padding: 0% 5%;
}
</style>
<script>
$('.img-hover-1 .tn-atom').append('<div class="content-layer-1"><h3>БИЗНЕС ЦЕНТР PLAZA,</h3><p>АСТАНА</p></div>');
</script>
