Hello Guys, I'm new to developing and starting school for it soon; however, I got this website where I need the 4 image blocks to change every 24 hours. here is the code, what can I do to have that done?

Appreciate the help, and please criticize my coding, so I can learn

<div id="home-set" class="container">
<div class="sixteen columns">
<article class="four columns alpha set">
<img src="portfolio/gabriella/gabriella01.jpg" alt="" class="scale-with-grid" />
<a href="gabriella.html">Gabriella Lacerda</a>
<div class="zoom">
<a href="portfolio/gabriella/gabriellaz01.jpg" rel="pp" class="view-set">View set</a>
<a href="gabriella.html" class="view-article">View article</a>
</div>
</article>
<article class="four columns set">
<img src="portfolio/larissas/larissa02.jpg" alt="" class="scale-with-grid" />
<a href="larissas.html">Larissa Santos</a>
<div class="zoom">
<a href="portfolio/larissas/larissaz02.jpg" rel="pp" class="view-set">View set</a>
<a href="larissas.html" class="view-article">View article</a>
</div>
</article>
<article class="four columns set">
<img src="portfolio/nathaly/nathaly01.jpg" alt="" class="scale-with-grid" />
<a href="nathaly.html">Nathaly Maia</a>
<div class="zoom">
<a href="portfolio/nathaly/nathalyz01.jpg" rel="pp" class="view-set">View set</a>
<a href="nathaly.html" class="view-article">View article</a>
</div>
</article>
<article class="four columns omega set">
<img src="portfolio/marialuiza/marialuiza01.jpg" alt="" class="scale-with-grid" />
<a href="marialuiza.html">Maria Luiza</a>
<div class="zoom">
<a href="portfolio/marialuiza/marialuizaz01.jpg" rel="pp" class="view-set">View set</a>
<a href="marialuiza.html" class="view-article">View article</a>
</div>
</article>
</div><!-- sixteen columns blocks from framework style at external drive -->