Adding an image with an effect on a page

Posted this 3 months ago, someone helped me, but I just realised that the code was missing something and that for all this time, when visitors clicked on the image, it went to a page with the image itself instead of going to the link:

Hi guys,

I haven’t opened my website and wordpress interface in a while. I’m currently trying to add two icons to one of my pages https://thais-breton.com/personal-work/
They are not doing the same thing as the other icons from other pages do, even though I copied the codes from these other icons. The second icon is not lighting up to its total opacity (words are a bit faded) and the first one is doing the right thing but in the wrong order (should be image first, then when the mouse goes on top we see the text)

Thank you in advance for your help!

Here is what I did:

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

<img class="top" src="https://thais-breton.com/wp-content/uploads/2015/01/voyage0.jpg" alt="voyage0" width="390" height="219" class="bottom" />

<a href="https://thais-breton.com/le-voyage/"><img src="https://thais-breton.com/wp-content/uploads/2015/01/voyage1-1.jpg" alt="voyage1" width="390" height="219" class="top" /></a>

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

<a href="https://thais-breton.com/palettewoody"><img src="https://thais-breton.com/wp-content/uploads/2015/01/pw1-1.jpg" alt="pw1" width="390" height="219" class="top" /></a>

<a href="https://thais-breton.com/palettewoody"><img src="https://thais-breton.com/wp-content/uploads/2015/01/pw0-1.jpg" alt="pw0" width="390" height="219" class="bottom" /></a>

</div>
</div>