Add text over images using CSS that only appears when hovering over image?

I have a page where all the categories for my products are listed using the portfolio design of Squarespace, I have already changed it a bit using CSS so that all the images get blurred when hovered over. Now I am looking for the names of each category to appear in the center of these images using CSS (I don't want to add text using the normal elements in Squarespace because due to that there is a small area in the image that does not get blurred when hovered over)

I tried doing it using yui ids but I know my syntax or something is wrong

 

/* Blur the image on hover */
.fluid-image-container.sqs-image-content img, 
#yui_3_17_2_1_1693229881543_97 img {
    filter: none !important;
    transition: filter 0.3s ease-in-out !important;
}

.fluid-image-container.sqs-image-content:hover img, 
#yui_3_17_2_1_1693229881543_97:hover img {
    filter: blur(5px) !important;
}

/* Initial State: No text */
.fluid-image-container.sqs-image-content::after, 
#yui_3_17_2_1_1693229881543_97::after {
    content: ""; /* Empty content by default */
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centering the text */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Placed above the image */
    pointer-events: none; /* Ensures text doesn't interfere with clickable elements */
}

a#block-yui_3_17_2_1_1693235575772_138>.sqs-block-image-link content-fill:hover::after {
    content: "Canulas";
    opacity: 1;
}

a#block-yui_3_17_2_1_1693236980860_127:hover::after {
    content: "Curetas";
    opacity: 1;
}

a#block-yui_3_17_2_1_1693236980860_65:hover::after {
    content: "Cinceles Ganchos y Erinas";
    opacity: 1;
}

This is for the first 3 images. Can anyone please tell me what I am doing wrong and how to rectify this?

Site: https://www.medicivic.com/productos

Since you're using image blocks, try:
 

1. Switching the image design to "Poster" and write your text over it. 

2. Remove the poster image color overlay if you like using the Paintbrush tool, site styles - color - color template - image overlay.  Secondly, make sure your Image Poster is set to "Center" in IMAGE BLOCKS.

3. Insert this into CSS which allows your to edit the overlay color and hide/reveal the title overlay:

.sqs-block-image .image-block-outer-wrapper.image-block-v2:hover .sqs-image-content::after, .sqs-block-image .image-block-outer-wrapper.image-block-v2:hover .image-overlay:hover{background-color: rgba(0,0,0,.5) !important;
  width: 100%;}

.image-block-poster-text-alignment-center .sqs-block-image .design-layout-poster .image-card>*
{visibility:hidden}

.image-block-poster-text-alignment-center .sqs-block-image .design-layout-poster:hover .image-card>*
{visibility:visible}

11 hours ago, DPruitt said:

Since you're using image blocks, try:
 

1. Switching the image design to "Poster" and write your text over it. 

2. Remove the poster image color overlay if you like using the Paintbrush tool, site styles - color - color template - image overlay.  Secondly, make sure your Image Poster is set to "Center" in IMAGE BLOCKS.

3. Insert this into CSS which allows your to edit the overlay color and hide/reveal the title overlay:

.sqs-block-image .image-block-outer-wrapper.image-block-v2:hover .sqs-image-content::after, .sqs-block-image .image-block-outer-wrapper.image-block-v2:hover .image-overlay:hover{background-color: rgba(0,0,0,.5) !important;
  width: 100%;}

.image-block-poster-text-alignment-center .sqs-block-image .design-layout-poster .image-card>*
{visibility:hidden}

.image-block-poster-text-alignment-center .sqs-block-image .design-layout-poster:hover .image-card>*
{visibility:visible}

 

I've added the images using Fluid engine, do I add the text on top manually for this to work?

ahh, sorry, this was for the classic section...

If that's the case, you can go that route instead.  Place each text block on top of it and then go back and write to hide/display the text block on hover for each element.  You would need to stretch the text block all the way over the image block so that they are the same size.

Honestly, it would probably be faster and a more long-term solution to use a classic section.  You wouldn't have to look up block numbers.