CSS_HTML hover animation code into a WP elementor plugin

详细信息

I need someone to take my existing CSS-HTML hover animation code and make into a RESPONSIVE Wordpress Elementor plugin so that I can use the element in Elementor.
you can see it in action https://test33.excelr8.management/
please read the following. please apply by telling me how you will
The code is fully functional and runs in a HTML widget, it's based on 3 images: a slider image, and 2 static images. currently I am using opacity to darken the images but I would want that to change into a filter where I can select the color of the filter and the opacity of the filer. The code will be shared with the selected freelancer
below you will find the description of the hover animation
1 Description:HTML/CSS snippet for an interactive image slider animation to be embedded in an Elementor HTML widget on a WordPress page. The animation involves three images: a "stat1" and “stat2” images and a "slider" image. The "stat" images remain static, and the "slider" image moves across the "stat" images on hover. The slider image must be same height as the 2 stat images.
2 Behavior Description:2.1 Initial State (Passive Mode):
Both "stat" and "slider" images are fully visible and positioned side by side with the edges touching pixel to pixel. “Slider” is either to the left of the “stat1” image or to the right of “stat2” image depending on the direction of the hover animation.The "stat" images displays a large headings each (“stat1” shows "01", “stat2” shows “02”) at the top and a smaller heading (“stat1” shows "Industrial and Operational Performance", “stat2” shows a different subheading) in the middle.
2.2Active State (On Hover):Triggered when the user hovers over the area occupied by the images (stat images and the area that will be occupied by the slider image).The "slider" image glides from left to right across the "stat2" and “stat2” images, taking 1 second as standard for the transition. Or, if opposite direction is selected, it glides from right to left.As the "slider" moves, the "stat" image becomes semi transparent (this is to change a filter where I can select the colour and the transparency of the filter for both passive and active), but the text on it remains opaque.The smaller headings are replaced by a detailed paragraphs of text that becomes visible only in this active state. This text in this paragraph is smaller than the smaller heading it replaces. At the end of the animation the “slider” image is on the opposite side with its edge touching the second stat image pixel to pixel.
2.3 Reverting to Passive State:Once the hover is removed, the animation reverses, returning to the initial state with the "slider" image moving back to its original position and the smaller heading replacing the text.
3. Variables accessible from elementor panelsI need to be able to define every image: stat1, stat2, slider The direction of the animation (left_to_right or right_to_left) with the corresponding The time the transition should be takingI need to be able to define all text on both imagesI need to be able to affect the size of the images I should be able to decide animation speed, currently set at 1 second
The following are the existing variables and I will need to be able to change them from the panel --image-gap: gap between the stat images --Large_heading_size: heading font sizes that I need to be able to change manually (same for both stat images) I should also be able to change the fonts
--Small_heading_size: heading font sizes that I need to be able to change manually (same for both stat images) I should also be able to change the fonts
--Paragraph_size: paragraph font size sizes that I need to be able to change manually (same for both stat images) I should also be able to change the fonts
--Large_heading_distance_to_top: distance to the top edge of the stat images (same distance used on both images here) --left_small_heading_distance_to_top: distance to the top edge of the stat1 (left image) image for small heading --right_small_heading_distance_to_top: distance to the top edge of the stat2 (right image) image for small heading --left_paragraph_distance_to_top: distance to the top edge of the stat1 (left image) image --right_paragraph_distance_to_top: distance to the top edge of the stat2 (right image) image --image_passive_transparency_level: This is to be changed to filter with transparency for passive (same for both images) --image_active_transparency_level: This is to be changed to filter with transparency for active – on hover (same for both images)