Stas1985,
возможный вариант, может кто-то предложит другой ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
.all-photo{ text-align: left; }
.all-photo a{font-size: 20px; cursor: pointer; line-height: 95px; color: #e0000f; text-decoration: none;}
.all-photo span{font-size: 15px; cursor: pointer; color: #e0000f; text-decoration: none;}
#info{
position: relative;height: 100px; width: 200px; overflow: hidden; transition: all 1s;
}
#info:after{
content: "";
position: absolute;
background-image: linear-gradient(transparent 25%, rgba(255, 255, 255, 1) 100%);
height: 100px; width: 200px;
top:0;
left: 0;
transition: 1s;
}
#info.open{
height: 400px;
}
#info.open:after{
transition: top 1.5s 1s;
height: 400px;
top : 400px;
}
</style>
<div class="all-photo">
<a href="javascript:allphoto()">Еще <?php echo $count_images ;?> фото </a>
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="glyphicon glyphicon-chevron-up"></span>
</div>
<div id="info">
<img src="https://javascript.ru/img/webstorm_200x200.png" alt="">
<img src="https://javascript.ru/img/webstorm_200x200.png" alt=""></div>
<script>
function allphoto()
{
document.querySelector("#info").classList.toggle("open")
}
</script>
</body>
</html>