Help is needed with the creation of personalized products

[Dubsides]

Hello, I need help, how to create an overlay layer with dynamic text to a certain image (for the image from this class" ProductImage__ProductImageCon-sc-1wpyz0a-0 fNNELt") on the product page (upsell block). The text must come from the input field “Enter your name or initials”. Similar functionality is available on this site: https://thecaseclubla.com/products/iphone-13-pro-max?variant=41312470499483

my site: https://lart-store.com/en-ua/products/case-for-apple-iphone-genuine-pebbled-leather-personalized-initials-letters

the photo shows an example of work:

[EcomGraduates]

hello there

To create an overlay layer with dynamic text on an image, you can use HTML, CSS, and JavaScript. Here’s a general outline of the steps you can follow:

1. Create an HTML element to contain the image and the overlay layer. You can use a div element for this.

2. Add the image to the container div. You can use the ProductImage__ProductImageCon-sc-1wpyz0a-0 fNNELt class to select the image element.

3. Add another div element inside the container div to create the overlay layer. Position this div on top of the image using CSS.

4. Add an input field for the user to enter their name or initials.

5. Use JavaScript to update the text in the overlay layer whenever the user types something in the input field. You can use an event listener to detect when the user types something and then update the text in the overlay layer using the innerHTML property.

Here’s an example of what the HTML and CSS might look like:

  
  

    Enter your name or initials
  

const nameInput = document.getElementById('name-input');
const nameInitials = document.getElementById('name-initials');

nameInput.addEventListener('input', () => {
  nameInitials.innerHTML = nameInput.value;
});