Jump to content

choochipastol

Member
  • Posts

    6
  • Joined

  • Last visited

choochipastol's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. I've added the images using Fluid engine, do I add the text on top manually for this to work?
  2. 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
  3. I added a custom whatsapp link to my header using this link It worked perfectly but the only issue is that the size of the whatsapp icon is too small and I do not know how I can size it up a little. Can anyone guide me?
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.