Currently, my website has a blog page that only showcases each individual blog post's photo and title. This is achieved through the use of a FOR loop (shown below). I am interested in implementing a feature where clicking on a blog post's photo opens up a DIV displaying a short excerpt and the blog title. Unfortunately, I am feeling quite out of my depth with this task. Any assistance would be greatly appreciated!
{% for article in blog.articles %}
{% unless article.tags contains 'exclude' and current_tags == blank %}
<div class="grid__item large--one-third small--one-whole {% cycle 'one-blog', 'two-blog', 'three-blog' %}" id="article-{{ article.id }}" data-alpha="{{ article.title }}" style="margin-bottom:50px;">
<div class="article-info">
<div class="article-info-inner">
<a href="{{ article.url }}"> <img src="{{ article.image.src | img_url: 'large' }}"></a>
<span class="post-excerpt" style=" font-size: 0.8em; margin-bottom: 0.8em; display: block; margin-top: 1em;">
{{article.excerpt | strip_html | truncatewords: 30}}
</span>
<h2 class="blog_title" style="text-align: center;"><a href="{{ article.url }}">{{ article.title }}</a></h2>
</div>
</div>
</div>
{% endunless %}
{% endfor %}