Есть фото галерея, она отображает 5 элементов, остальные скрыты при помощи свойства overflow : hiden, вопрос: как можно сделать подсчет и вывод числа скрытых элементов? Должно получиться вот так https://i.stack.imgur.com/zRZKU.png
#lightgallery {
overflow: hidden;
margin-top: 30px;
height: 122px;
}
#lightgallery img {
width: 176px;
}
#lightgallery a {
color: transparent;
}
#lightgallery a:nth-child(5) img {
filter: blur(5px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/lightgallery.min.js"></script>
<div id="lightgallery">
<a href="assets/img/light1.jpg">
<img src="assets/img/light1.jpg" alt="">
</a>
<a href="assets/img/light2.jpg">
<img src="assets/img/light2.jpg" alt="">
</a>
<a href="assets/img/light3.jpg">
<img src="assets/img/light3.jpg" alt="">
</a>
<a href="assets/img/light4.jpg">
<img src="assets/img/light4.jpg" alt="">
</a>
<a href="assets/img/light5.jpg">
<img src="assets/img/light5.jpg" alt="">
</a>
<a href="assets/img/light4.jpg">
<img src="assets/img/light4.jpg" alt="">
</a>
<a href="assets/img/light5.jpg">
<img src="assets/img/light5.jpg" alt="">
</a>
</div>
overflow:hidden
родителя, JQuery-слекторы:visible
и:hidden
работать не будут.