See live example here first:

https://moderatortal.zendesk.com/hc/en-us/sections/201783699-Section-one

The goal is to replace the boring list of steps into triggering images.

The thumbnail for each article will be the first image in the article page - so make sure you have at least one in each.

For my design, I made sure all images are 200x200 for best results.

First - the CSS: Add this to the CSS tab in your theme editor (modify if needed):

.article-list li img.article_thumbs__c {
border: solid;
border-width: 1px;
border-radius: 140px;
border-color: lightgray;
margin: 20px 10px;
}

Now, for the script:

Add the following script to the beginning of the Section Page in the theme editor:
Make sure you modify the section ID in the IF clause in the 2nd row of the script.

<script>
$(document).ready(function(){
if (window.location.pathname.indexOf('/sections/201783699')!=-1) {
$('.article-list li').css('display','inline-block');
$('.article-list').css('text-align','center');
$('.article-list').css('list-style','none');
var item = new Array();
var obj = new Array();
var artLink = new Array();
var artImage = new Array();
var artName = new Array();
$('.article-list li').each(function(i){
item[i]=$(this);
artLink[i] = $(this).find('a').attr('href');
artName[i] = $(this).find('a').html();
obj[i] = $.ajax(artLink[i]).done(function(){
artImage[i] = $('.article-body img',obj[i].responseText).attr('src');
item[i].html('<a href="'+artLink[i]+'"><img class="article_thumbs__c" src="'+artImage[i]+'" alt="'+artName[i]+'" title="'+artName[i]+'"></a>');
});
});
};
});
</script>

Publish, and you are done.