LordeckiyYaya,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: hsla(30, 100%, 49%, 1);
}
.img{
overflow: hidden;
}
.text-span {
display: inline-block;
transform: translateY(250px);
transition: 1s;
}
.arrow:before{
content: 'Know more';
}
.for-main .text-span{
transform: translateY(0px);
}
.for-main .arrow:before{
content: 'Close';
}
</style>
</head>
<body>
<div class="content" id="block">
<div class="img">
<h6 class="text-uppercase font-weight-bold text-left text">Designing is the cool love for.</h6>
<span class="text-span">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum libero odio soluta. Autem debitis, exercitationem maxime praesentium quaerat repudiandae sit... <p class="more" style="display: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto at aut beatae, consectetur dicta dolore ducimus ea eligendi enim eum expedita explicabo incidunt iure labore magnam neque provident saepe sit soluta suscipit tempora totam vel vitae voluptas voluptatem voluptatum. Earum eveniet facilis praesentium repudiandae? Ab assumenda doloremque dolorum</p></span>
<span class="text-uppercase arrow"><i class="fa fa-arrow-right"></i></span>
<img src="img/services/image6.png" alt="image">
</div>
<div class="img" >
<h6 class="text-uppercase font-weight-bold text-left text">Designing is the cool love for.</h6>
<span class="text-span">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum libero odio soluta. Autem debitis, exercitationem maxime praesentium quaerat repudiandae sit... <p class="more" style="display: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto at aut beatae, consectetur dicta dolore ducimus ea eligendi enim eum expedita explicabo incidunt iure labore magnam neque provident saepe sit soluta suscipit tempora totam vel vitae voluptas voluptatem voluptatum. Earum eveniet facilis praesentium repudiandae? Ab assumenda doloremque dolorum</p></span>
<span class="text-uppercase arrow"><i class="fa fa-arrow-right"></i></span>
<img src="img/services/image1.png" alt="image">
</div>
</div>
<script>
document.addEventListener("click", event => {
const btn = event.target.closest(".arrow");
if(btn) {
btn.parentNode.classList.toggle("for-main");
}
});
</script>
</body>
</html>