Hovering grid items

I am encountering some issues with my code.
I am trying to create a grid that contains several “Services”, with background picture and title for each. So far I have managed to do that by mixing grid and flex-box (maybe not the easiest way?)

Now I want to have the title and background to fade and disappear in order to show a small explanatory text instead about the service.

I have tried to do so by putting a text block on top of the previous block, using absolute positioning and taking the full width / height of the cell and then appearing / disappearing when hovering using either display: none or opacity: 0 , without success. Then I have set the font size to go from 0 to 1rem when hovering, which works but looks bad.

Please find my current code below, if you can help me improve it and find a solution.
Note that I have only worked on the 1st grid case so far and just put background image for the other 8
Thanks a lot.

html code:

 <!-- SERVICES -->

        <div class="services">
            <div class="grid">
                <div class="image-box box-1">
                    <div class="text-box">
                        <h2>Digital Marketing Strategy</h2>
                    <div class="description">
                        <h3>A strategy that covers all the points you need to gain visibility and performance.</h3>
                <img src="resources/img/Social Media Management.jpeg" alt="Social Media Management">
                <img src="resources/img/Website Recommendations.jpeg" alt="Website Recommendations">
                <img src="resources/img/Branding Startegy and Market Research.jpeg" alt="Branding">
                <img src="resources/img/Content Marketing.jpeg" alt="Content Marketing">
                <img src="resources/img/Email Marketing.jpeg" alt="Email Marketing">
                <img src="resources/img/Digital Advertising.jpeg" alt="Digital Advertising">
                <img src="resources/img/copywirting.jpeg" alt="Copywriting">
                <img src="resources/img/interrogation point.png" alt="More">

CSS code


.services {
    margin-top: 2rem;

.services .grid {
    --gap: 1rem; /*Declaring a variable called gap and giving a value to reuse later on */
    --num-cols: 3; /*Declaring a variable */
    --row-height: 20rem; /*Declaring a variable */

    box-sizing: border-box; /* This insure the padding won't increase the size of the total container */
    padding: var(--gap);

    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-height); /* we want an unlimited number of ?px rows to make the grid */
    gap: var(--gap);

.services img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* images will maintain their aspect ratio */

.image-box {
    display: flex;
    align-items: center;
    position: relative;

.services h2 {
    font-size: 2rem;
    font-weight: 700;
    padding: 0.5rem;
    text-align: center;

.services h3 {
    text-align: center;

.box-1 {
    background-image: url('/Users/aurele/Desktop/Main/Coding/projects/Camille/resources/img/hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

.text-box {
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    width: 100%;
    margin: 0px;
    padding: 30px;

.description {
    position: absolute;
    width: 100%;
    height: 100%;

.description:hover {
    color: black;
    background-color: white;
    font-size: 1.5rem;
    border: 1px solid black;
    transition: all 700ms ease;

.description:hover + .services h3 {

.services img:hovers {
    opacity: 30%;

/* Anything under 1024px */
@media screen and (max-width: 1024px) {
    .services .grid {
        --num-cols: 2;
        --row-height: 15rem;