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