How to get text to appear over a faded image, when the mouse is hovering over the image?

Question

I want the image to fade when you hover over it, and for a text to become visible over that same image.
I can get the image to fade, but I can't seem to get the text visible when hovering over the image, and neither to get it to stack on top of and in the middle of the image displayed.

HTML:

<div class="aktiviteter">
                
        <div class="aktivitet">
                <a href="akt1.html">
                <img width="400" height="350" src="bilder/telt.jpg" alt="telt">
                <h4 class="akt-navn">  Telttur </h4>
                            
        </div>

        <div class="aktivitet">
                <a href="akt2.html">
            <img width="400" height="350" src="bilder/baat.jpg" alt="telt">
            <h4 class="akt-navn">  Packraft </h4>
                            
        </div>

        <div class="aktivitet">
            <a href="akt3.html">
            <img width="400" height="350" src="bilder/topp.jpg" alt="telt">
            <h4 class="akt-navn">  Topptur </h4>
                            
        </div>

        <div class="aktivitet">
            <a href="akt4.html">
            <img width="400" height="350" src="bilder/foto.jpg" alt="telt">
            <h4 class="akt-navn">  foto </h4>
                            
        </div>
                
</div>

CSS:

.aktiviteter {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 100px;
    }

    .aktivitet{ 
        width: auto;
    margin-left: 75px;
    padding-top: 10px;
    padding-bottom: 30px;
    position: relative;
    }


    .aktiviteter img:hover {
    transform: scale(1.0);
    opacity: 0.2;
    content: a; 
    }


    .aktivitet img{
    border-radius: 100px;
    }

    .akt-navn{ 
    opacity: 0; 
    }

    .aktivitet img:hover .akt-navn{
    opacity: 1;
    }