Lost in code

Heyoh!

I’ve been trying to figure this one out. Wanted to change the photos of this page, result: the correct photos appear from the MAC I am working on, but without the hover the mouse animation. The old photos appear on other MACS with the old hover the mouse animation, except for the first photo which is correct.

Any idea what is going on, how can I get the right photos to appear everywhere, and with the hover animation?

Thank you kindly in advance!

<div>
<div style="width: 32%; float: left;">
<div id="cf" style="width: 100%; float: left;">

<img src="https://thais-breton.com/wp-content/uploads/2018/02/corporate1-1.jpg" alt="" width="390" height="219" class="top" />

<a href="https://thais-breton.com/corporate/">

<img class="top" src="https://thais-breton.com/wp-content/uploads/2018/02/corporate0-2.jpg" alt="" width="390" height="219" class="bottom" />
</a>

</div>
</div>
<div style="width: 32%; margin-left: 2%; float: left;">
<div id="cf" style="width: 100%; float: left;">

<img src="https://thais-breton.com/wp-content/uploads/2018/02/coverage1.jpg" alt="" width="390" height="219" class="top" />

<a href="https://thais-breton.com/coverage/">

<img class="top" src="https://thais-breton.com/wp-content/uploads/2018/02/coverage0.jpg" alt="" width="390" height="219" class="bottom"/>
</a>

</div>
</div>
<div style="width: 32%; margin-left: 2%; float: left;">
<div id="cf" style="width: 100%; float: left;">

<img src="https://thais-breton.com/wp-content/uploads/2018/02/PERSONAL1.jpg" alt="" width="390" height="219" class="top" />

<a href="https://thais-breton.com/personal/">

<img class="top" src="https://thais-breton.com/wp-content/uploads/2018/02/PERSONAL0-1.jpg" alt="" width="390" height="219" class="bottom" />

</a>
</div>
</div>

The page I need help with: [log in to see the link]