Hover_Effect.php — Essential Addons for Elementor – Popular Elementor Templates & Widgets 6.0.10

essential-addons-for-elementor-lite / includes / Extensions / Hover_Effect.php

essential-addons-for-elementor-lite / includes / Extensions Last commit date

Custom_JS.php 1 year ago Hover_Effect.php 1 year ago Post_Duplicator.php 1 year ago Promotion.php 1 year ago Reading_Progress.php 3 years ago Scroll_to_Top.php 1 year ago Table_of_Content.php 1 year ago Wrapper_Link.php 1 year ago index.php 3 years ago

Hover_Effect.php

1637 lines

1	<?php
2
3	namespace Essential_Addons_Elementor\Extensions;
4
5	use Elementor\Controls_Manager;
6
7
8	if ( ! defined( 'ABSPATH' ) ) {
9	exit;
10	}
11
12	class Hover_Effect {
13
14	/**
15	* Initialize hooks
16	*/
17	public function __construct() {
18	add_action( 'elementor/element/common/_section_style/after_section_end', [ $this, 'register_controls' ] );
19	add_action( 'elementor/frontend/before_render', [ $this, 'before_render' ], 100 );
20	}
21
22	public function register_controls( $element ) {
23	$element->start_controls_section(
24	'eael_hover_effect_section',
25	[
26	'label' => __( '<i class="eaicon-logo"></i> Hover Interactions', 'essential-addons-for-elementor-lite' ),
27	'tab' => Controls_Manager::TAB_ADVANCED
28	]
29	);
30
31	$element->add_control(
32	'eael_hover_effect_switch',
33	[
34	'label' => __( 'Enable Hover Interactions', 'essential-addons-for-elementor-lite' ),
35	'type' => Controls_Manager::SWITCHER
36	]
37	);
38
39	$element->add_control(
40	'eael_hover_effect_enable_note',
41	[
42	'type' => Controls_Manager::RAW_HTML,
43	'raw' => __( "Enabling this option will disable Elementor's Transform feature within the Elementor Editor.", 'essential-addons-for-elementor-lite' ),
44	'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
45	]
46	);
47
48	$element->add_control(
49	'eael_hover_effect_enable_live_changes',
50	[
51	'label' => __( 'Show Preview in Editor', 'essential-addons-for-elementor-lite' ),
52	'type' => Controls_Manager::SWITCHER,
53	'separator' => 'before',
54	'condition' => [
55	'eael_hover_effect_switch' => 'yes',
56	]
57	]
58	);
59
60	$element->add_control(
61	'eael_hover_effect_enable_live_changes_note',
62	[
63	'type' => Controls_Manager::RAW_HTML,
64	'raw' => __( 'Enabling this option will let you preview the Hover Interactions inside the Elementor Editor.', 'essential-addons-for-elementor-lite' ),
65	'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
66	'condition' => [
67	'eael_hover_effect_switch' => 'yes',
68	],
69	]
70	);
71
72	$element->start_controls_tabs(
73	'eael_hover_effect',
74	[
75	'condition' => [
76	'eael_hover_effect_switch' => 'yes',
77	]
78	]
79	);
80
81	//Normal Tab
82	$element->start_controls_tab(
83	'eael_hover_effect_normal_tab',
84	[
85	'label' => esc_html__( 'Normal', 'essential-addons-for-elementor-lite' ),
86	'condition' => [
87	'eael_hover_effect_switch' => 'yes',
88	]
89	]
90	);
91
92	//Opacity
93	$element->add_control(
94	'eael_hover_effect_opacity_popover',
95	[
96	'label' => __( 'Opacity', 'essential-addons-for-elementor-lite' ),
97	'type' => Controls_Manager::POPOVER_TOGGLE,
98	'return_value' => 'yes',
99	'condition' => [
100	'eael_hover_effect_switch' => 'yes',
101	]
102	]
103	);
104
105	$element->start_popover();
106	$element->add_control(
107	'eael_hover_effect_opacity',
108	[
109	'label' => __( 'Opacity', 'essential-addons-for-elementor-lite' ),
110	'type' => Controls_Manager::SLIDER,
111	'default' => [
112	'size' => 0.8,
113	],
114	'range' => [
115	'px' => [
116	'max' => 1,
117	'step' => 0.01,
118	],
119	],
120	'condition' => [
121	'eael_hover_effect_opacity_popover' => 'yes',
122	],
123	]
124	);
125	$element->end_popover();
126
127	//Filter
128	$element->add_control(
129	'eael_hover_effect_filter_popover',
130	[
131	'label' => __( 'Filter', 'essential-addons-for-elementor-lite' ),
132	'type' => Controls_Manager::POPOVER_TOGGLE,
133	'return_value' => 'yes',
134	'condition' => [
135	'eael_hover_effect_switch' => 'yes',
136	]
137	]
138	);
139
140	$element->start_popover();
141
142	//Blur
143	$element->add_control(
144	'eael_hover_effect_blur_is_on',
145	[
146	'label' => __( 'Blur', 'essential-addons-for-elementor-lite' ),
147	'type' => Controls_Manager::SWITCHER,
148	'condition' => [
149	'eael_hover_effect_filter_popover' => 'yes',
150	],
151	]
152	);
153
154	$element->add_control(
155	'eael_hover_effect_blur',
156	[
157	'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
158	'type' => Controls_Manager::SLIDER,
159	'default' => [
160	'size' => 1,
161	],
162	'range' => [
163	'px' => [
164	'max' => 10,
165	'step' => 0.5,
166	],
167	],
168	'condition' => [
169	'eael_hover_effect_blur_is_on' => 'yes',
170	'eael_hover_effect_filter_popover' => 'yes',
171	],
172	]
173	);
174
175	//Contrast
176	$element->add_control(
177	'eael_hover_effect_contrast_is_on',
178	[
179	'label' => __( 'Contrast', 'essential-addons-for-elementor-lite' ),
180	'type' => Controls_Manager::SWITCHER,
181	'condition' => [
182	'eael_hover_effect_filter_popover' => 'yes',
183	],
184	]
185	);
186
187	$element->add_control(
188	'eael_hover_effect_contrast',
189	[
190	'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
191	'type' => Controls_Manager::SLIDER,
192	'default' => [
193	'size' => 80,
194	],
195	'range' => [
196	'%' => [
197	'max' => 1000,
198	'step' => 10,
199	],
200	],
201	'condition' => [
202	'eael_hover_effect_contrast_is_on' => 'yes',
203	'eael_hover_effect_filter_popover' => 'yes',
204	],
205	]
206	);
207
208	//Grayscal
209	$element->add_control(
210	'eael_hover_effect_grayscale_is_on',
211	[
212	'label' => __( 'Grayscale', 'essential-addons-for-elementor-lite' ),
213	'type' => Controls_Manager::SWITCHER,
214	'condition' => [
215	'eael_hover_effect_filter_popover' => 'yes',
216	],
217	]
218	);
219
220	$element->add_control(
221	'eael_hover_effect_grayscal',
222	[
223	'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
224	'type' => Controls_Manager::SLIDER,
225	'default' => [
226	'size' => 40,
227	],
228	'range' => [
229	'%' => [
230	'max' => 100,
231	'step' => 10,
232	],
233	],
234	'condition' => [
235	'eael_hover_effect_grayscale_is_on' => 'yes',
236	'eael_hover_effect_filter_popover' => 'yes',
237	],
238	]
239	);
240
241	//Invert
242	$element->add_control(
243	'eael_hover_effect_invert_is_on',
244	[
245	'label' => __( 'Invert', 'essential-addons-for-elementor-lite' ),
246	'type' => Controls_Manager::SWITCHER,
247	'condition' => [
248	'eael_hover_effect_filter_popover' => 'yes',
249	],
250	]
251	);
252
253	$element->add_control(
254	'eael_hover_effect_invert',
255	[
256	'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
257	'type' => Controls_Manager::SLIDER,
258	'default' => [
259	'size' => 70,
260	],
261	'range' => [
262	'%' => [
263	'max' => 100,
264	'step' => 10,
265	],
266	],
267	'condition' => [
268	'eael_hover_effect_invert_is_on' => 'yes',
269	'eael_hover_effect_filter_popover' => 'yes',
270	],
271	]
272	);
273
274	//Saturate
275	$element->add_control(
276	'eael_hover_effect_saturate_is_on',
277	[
278	'label' => __( 'Saturate', 'essential-addons-for-elementor-lite' ),
279	'type' => Controls_Manager::SWITCHER,
280	'condition' => [
281	'eael_hover_effect_filter_popover' => 'yes',
282	],
283	]
284	);
285
286	$element->add_control(
287	'eael_hover_effect_saturate',
288	[
289	'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
290	'type' => Controls_Manager::SLIDER,
291	'default' => [
292	'size' => 50,
293	],
294	'range' => [
295	'%' => [
296	'max' => 1000,
297	'step' => 10,
298	],
299	],
300	'condition' => [
301	'eael_hover_effect_saturate_is_on' => 'yes',
302	'eael_hover_effect_filter_popover' => 'yes',
303	],
304	]
305	);
306
307	//Sepia
308	$element->add_control(
309	'eael_hover_effect_sepia_is_on',
310	[
311	'label' => __( 'Sepia', 'essential-addons-for-elementor-lite' ),
312	'type' => Controls_Manager::SWITCHER,
313	'condition' => [
314	'eael_hover_effect_filter_popover' => 'yes',
315	],
316	]
317	);
318
319	$element->add_control(
320	'eael_hover_effect_sepia',
321	[
322	'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
323	'type' => Controls_Manager::SLIDER,
324	'default' => [
325	'size' => 50,
326	],
327	'range' => [
328	'%' => [
329	'max' => 100,
330	'step' => 10,
331	],
332	],
333	'condition' => [
334	'eael_hover_effect_sepia_is_on' => 'yes',
335	'eael_hover_effect_filter_popover' => 'yes',
336	],
337	]
338	);
339	$element->end_popover();
340
341	//Offset
342	$element->add_control(
343	'eael_hover_effect_offset_popover',
344	[
345	'label' => __( 'Offset', 'essential-addons-for-elementor-lite' ),
346	'type' => Controls_Manager::POPOVER_TOGGLE,
347	'return_value' => 'yes',
348	'frontend_available' => true,
349	'condition' => [
350	'eael_hover_effect_switch' => 'yes',
351	]
352	]
353	);
354	$element->start_popover();
355	$element->add_responsive_control(
356	'eael_hover_effect_offset_left',
357	[
358	'label' => __( 'Offset Top', 'essential-addons-for-elementor-lite' ),
359	'type' => Controls_Manager::SLIDER,
360	'frontend_available' => true,
361	'size_units' => ['px', '%'],
362	'default' => [
363	'unit' => 'px',
364	'size' => 5,
365	],
366	'range' => [
367	'px' => [
368	'max' => 500,
369	'min' => -500,
370	'step' => 1,
371	],
372	'%' => [
373	'max' => 100,
374	'min' => -100,
375	'step' => 1,
376	],
377	],
378	'condition' => [
379	'eael_hover_effect_offset_popover' => 'yes',
380	],
381	]
382	);
383
384	$element->add_responsive_control(
385	'eael_hover_effect_offset_top',
386	[
387	'label' => __( 'Offset Left', 'essential-addons-for-elementor-lite' ),
388	'type' => Controls_Manager::SLIDER,
389	'frontend_available' => true,
390	'size_units' => ['px', '%'],
391	'default' => [
392	'unit' => 'px',
393	'size' => 5,
394	],
395	'range' => [
396	'px' => [
397	'max' => 500,
398	'min' => -500,
399	'step' => 1,
400	],
401	'%' => [
402	'max' => 100,
403	'min' => -100,
404	'step' => 1,
405	],
406	],
407	'condition' => [
408	'eael_hover_effect_offset_popover' => 'yes',
409	],
410	]
411	);
412	$element->end_popover();
413
414	//Transform
415	$element->add_control(
416	'eael_hover_effect_transform_popover',
417	[
418	'label' => __( 'Transform', 'essential-addons-for-elementor-lite' ),
419	'type' => Controls_Manager::POPOVER_TOGGLE,
420	'return_value' => 'yes',
421	'frontend_available' => true,
422	'condition' => [
423	'eael_hover_effect_switch' => 'yes',
424	]
425	]
426	);
427
428	//Rotate
429	$element->start_popover();
430	$element->add_control(
431	'eael_hover_effect_rotate_is_on',
432	[
433	'label' => __( 'Rotate', 'essential-addons-for-elementor-lite' ),
434	'type' => Controls_Manager::SWITCHER,
435	'condition' => [
436	'eael_hover_effect_transform_popover' => 'yes',
437	],
438	]
439	);
440
441	//RotateX
442	$element->add_responsive_control(
443	'eael_hover_effect_transform_rotatex',
444	[
445	'label' => esc_html__( 'RotateX (deg)', 'essential-addons-for-elementor-lite' ),
446	'type' => \Elementor\Controls_Manager::SLIDER,
447	'range' => [
448	'px' => [
449	'min' => -180,
450	'max' => 180,
451	'step' => 1,
452	],
453	],
454	'default' => [
455	'size' => 0,
456	],
457	'condition' => [
458	'eael_hover_effect_rotate_is_on' => 'yes',
459	'eael_hover_effect_transform_popover' => 'yes',
460	],
461	]
462	);
463
464	//RotateY
465	$element->add_responsive_control(
466	'eael_hover_effect_transform_rotatey',
467	[
468	'label' => esc_html__( 'RotateY (deg)', 'essential-addons-for-elementor-lite' ),
469	'type' => \Elementor\Controls_Manager::SLIDER,
470	'range' => [
471	'px' => [
472	'min' => -180,
473	'max' => 180,
474	'step' => 1,
475	],
476	],
477	'default' => [
478	'size' => 0,
479	],
480	'condition' => [
481	'eael_hover_effect_rotate_is_on' => 'yes',
482	'eael_hover_effect_transform_popover' => 'yes',
483	],
484	]
485	);
486
487	//RotateZ
488	$element->add_responsive_control(
489	'eael_hover_effect_transform_rotatez',
490	[
491	'label' => esc_html__( 'RotateZ (deg)', 'essential-addons-for-elementor-lite' ),
492	'type' => \Elementor\Controls_Manager::SLIDER,
493	'range' => [
494	'px' => [
495	'min' => -180,
496	'max' => 180,
497	'step' => 1,
498	],
499	],
500	'default' => [
501	'size' => 5,
502	],
503	'condition' => [
504	'eael_hover_effect_rotate_is_on' => 'yes',
505	'eael_hover_effect_transform_popover' => 'yes',
506	],
507	]
508	);
509
510	//Scale
511	$element->add_control(
512	'eael_hover_effect_scale_is_on',
513	[
514	'label' => __( 'Scale', 'essential-addons-for-elementor-lite' ),
515	'type' => Controls_Manager::SWITCHER,
516	'condition' => [
517	'eael_hover_effect_transform_popover' => 'yes',
518	],
519	]
520	);
521
522	//ScaleX
523	$element->add_responsive_control(
524	'eael_hover_effect_transform_scalex',
525	[
526	'label' => esc_html__( 'ScaleX', 'essential-addons-for-elementor-lite' ),
527	'type' => \Elementor\Controls_Manager::SLIDER,
528	'range' => [
529	'px' => [
530	'max' => 3,
531	'step' => 0.1,
532	],
533	],
534	'default' => [
535	'size' => 0.9,
536	],
537	'condition' => [
538	'eael_hover_effect_scale_is_on' => 'yes',
539	'eael_hover_effect_transform_popover' => 'yes',
540	],
541	]
542	);
543
544	//ScaleY
545	$element->add_responsive_control(
546	'eael_hover_effect_transform_scaley',
547	[
548	'label' => esc_html__( 'ScaleY', 'essential-addons-for-elementor-lite' ),
549	'type' => \Elementor\Controls_Manager::SLIDER,
550	'range' => [
551	'px' => [
552	'max' => 3,
553	'step' => 0.1,
554	],
555	],
556	'default' => [
557	'size' => 0.9,
558	],
559	'condition' => [
560	'eael_hover_effect_scale_is_on' => 'yes',
561	'eael_hover_effect_transform_popover' => 'yes',
562	],
563	]
564	);
565
566	//Skew
567	$element->add_control(
568	'eael_hover_effect_skew_is_on',
569	[
570	'label' => __( 'Skew', 'essential-addons-for-elementor-lite' ),
571	'type' => Controls_Manager::SWITCHER,
572	'condition' => [
573	'eael_hover_effect_transform_popover' => 'yes',
574	],
575	]
576	);
577
578	//SkewX
579	$element->add_responsive_control(
580	'eael_hover_effect_transform_skewx',
581	[
582	'label' => esc_html__( 'SkewX (deg)', 'essential-addons-for-elementor-lite' ),
583	'type' => \Elementor\Controls_Manager::SLIDER,
584	'range' => [
585	'px' => [
586	'min' => 0,
587	'max' => 180,
588	'step' => 1,
589	],
590	],
591	'default' => [
592	'size' => 5,
593	],
594	'condition' => [
595	'eael_hover_effect_skew_is_on' => 'yes',
596	'eael_hover_effect_transform_popover' => 'yes',
597	],
598	]
599	);
600
601	//SkewY
602	$element->add_responsive_control(
603	'eael_hover_effect_transform_skewy',
604	[
605	'label' => esc_html__( 'SkewY (deg)', 'essential-addons-for-elementor-lite' ),
606	'type' => \Elementor\Controls_Manager::SLIDER,
607	'range' => [
608	'px' => [
609	'min' => 0,
610	'max' => 180,
611	'step' => 1,
612	],
613	],
614	'default' => [
615	'size' => 5,
616	],
617	'condition' => [
618	'eael_hover_effect_skew_is_on' => 'yes',
619	'eael_hover_effect_transform_popover' => 'yes',
620	],
621	]
622	);
623
624	$element->end_popover();
625
626	// General Settings
627	$element->add_control(
628	'eael_hover_effect_general_settings_heading',
629	[
630	'label' => __( 'General Settings', 'essential-addons-for-elementor-lite' ),
631	'type' => Controls_Manager::HEADING,
632	'separator' => 'before',
633	'condition' => [
634	'eael_hover_effect_switch' => 'yes',
635	]
636	]
637	);
638
639	//Duration
640	$element->add_control(
641	'eael_hover_effect_general_settings_duration',
642	[
643	'label' => __( 'Duration (ms)', 'essential-addons-for-elementor-lite' ),
644	'type' => Controls_Manager::SLIDER,
645	'range' => [
646	'px' => [
647	'min' => 0,
648	'max' => 10000,
649	'step' => 100,
650	],
651	],
652	'default' => [
653	'size' => 1000,
654	],
655	'condition' => [
656	'eael_hover_effect_switch' => 'yes',
657	]
658	]
659	);
660
661	//Delay
662	$element->add_control(
663	'eael_hover_effect_general_settings_delay',
664	[
665	'label' => __( 'Delay (ms)', 'essential-addons-for-elementor-lite' ),
666	'type' => Controls_Manager::SLIDER,
667	'range' => [
668	'px' => [
669	'min' => 0,
670	'max' => 10000,
671	'step' => 100,
672	],
673	],
674	'condition' => [
675	'eael_hover_effect_switch' => 'yes',
676	]
677	]
678	);
679
680	$element->add_control(
681	'eael_hover_effect_general_settings_easing',
682	[
683	'label' => __( 'Easing', 'essential-addons-for-elementor-lite' ),
684	'type' => Controls_Manager::SELECT,
685	'default' => 'ease',
686	'frontend_available' => true,
687	'options' => [
688	'ease' => __( 'Default', 'essential-addons-for-elementor-lite' ),
689	'ease-in' => __( 'Ease-in', 'essential-addons-for-elementor-lite' ),
690	'ease-out' => __( 'Ease-out', 'essential-addons-for-elementor-lite' ),
691	'ease-in-out' => __( 'Ease-in-out', 'essential-addons-for-elementor-lite' ),
692	],
693	'condition' => [
694	'eael_hover_effect_switch' => 'yes',
695	]
696	]
697	);
698
699	$element->end_controls_tab();
700
701	/**
702	* Hovar Tab
703	*/
704	$element->start_controls_tab(
705	'eael_hover_effect_hover_tab',
706	[
707	'label' => esc_html__( 'Hover', 'essential-addons-for-elementor-lite' ),
708	'condition' => [
709	'eael_hover_effect_switch' => 'yes',
710	]
711	]
712	);
713
714	//Opacity Hover
715	$element->add_control(
716	'eael_hover_effect_opacity_popover_hover',
717	[
718	'label' => __( 'Opacity', 'essential-addons-for-elementor-lite' ),
719	'type' => Controls_Manager::POPOVER_TOGGLE,
720	'return_value' => 'yes',
721	'frontend_available' => true,
722	'condition' => [
723	'eael_hover_effect_switch' => 'yes',
724	]
725	]
726	);
727
728	$element->start_popover();
729	$element->add_control(
730	'eael_hover_effect_opacity_hover',
731	[
732	'label' => __( 'Opacity', 'essential-addons-for-elementor-lite' ),
733	'type' => Controls_Manager::SLIDER,
734	'frontend_available' => true,
735	'default' => [
736	'size' => 1,
737	],
738	'range' => [
739	'px' => [
740	'max' => 1,
741	'step' => 0.01,
742	],
743	],
744	'condition' => [
745	'eael_hover_effect_opacity_popover_hover' => 'yes',
746	],
747	]
748	);
749	$element->end_popover();
750
751	//Filter Hover Start
752	$element->add_control(
753	'eael_hover_effect_filter_hover_popover',
754	[
755	'label' => __( 'Filter', 'essential-addons-for-elementor-lite' ),
756	'type' => Controls_Manager::POPOVER_TOGGLE,
757	'return_value' => 'yes',
758	'condition' => [
759	'eael_hover_effect_switch' => 'yes',
760	]
761	]
762	);
763
764	$element->start_popover();
765
766	//Blur Start
767	$element->add_control(
768	'eael_hover_effect_blur_hover_is_on',
769	[
770	'label' => __( 'Blur', 'essential-addons-for-elementor-lite' ),
771	'type' => Controls_Manager::SWITCHER,
772	'condition' => [
773	'eael_hover_effect_filter_hover_popover' => 'yes',
774	]
775	]
776	);
777
778	$element->add_control(
779	'eael_hover_effect_blur_hover',
780	[
781	'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
782	'type' => Controls_Manager::SLIDER,
783	'frontend_available' => true,
784	'size_units' => ['px'],
785	'default' => [
786	'size' => 0,
787	],
788	'range' => [
789	'px' => [
790	'max' => 10,
791	'step' => 0.5,
792	],
793	],
794	'condition' => [
795	'eael_hover_effect_blur_hover_is_on' => 'yes',
796	'eael_hover_effect_filter_hover_popover' => 'yes',
797	],
798	]
799	);
800	//Blur End
801
802	//Contrast Start
803	$element->add_control(
804	'eael_hover_effect_contrast_hover_is_on',
805	[
806	'label' => __( 'Contrast', 'essential-addons-for-elementor-lite' ),
807	'type' => Controls_Manager::SWITCHER,
808	'condition' => [
809	'eael_hover_effect_filter_hover_popover' => 'yes',
810	],
811	]
812	);
813
814	$element->add_control(
815	'eael_hover_effect_contrast_hover',
816	[
817	'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
818	'type' => Controls_Manager::SLIDER,
819	'frontend_available' => true,
820	'size_units' => ['%'],
821	'default' => [
822	'unit' => '%',
823	'size' => 100,
824	],
825	'range' => [
826	'%' => [
827	'max' => 1000,
828	'step' => 10,
829	],
830	],
831	'condition' => [
832	'eael_hover_effect_contrast_hover_is_on' => 'yes',
833	'eael_hover_effect_filter_hover_popover' => 'yes',
834	],
835	]
836	);
837	//Contrast End
838
839	//Grayscale Start
840	$element->add_control(
841	'eael_hover_effect_grayscale_hover_is_on',
842	[
843	'label' => __( 'Grayscale', 'essential-addons-for-elementor-lite' ),
844	'type' => Controls_Manager::SWITCHER,
845	'condition' => [
846	'eael_hover_effect_filter_hover_popover' => 'yes',
847	],
848	]
849	);
850
851	$element->add_control(
852	'eael_hover_effect_grayscal_hover',
853	[
854	'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
855	'type' => Controls_Manager::SLIDER,
856	'size_units' => ['%'],
857	'default' => [
858	'unit' => '%',
859	'size' => 0,
860	],
861	'range' => [
862	'%' => [
863	'max' => 100,
864	'step' => 10,
865	],
866	],
867	'condition' => [
868	'eael_hover_effect_grayscale_hover_is_on' => 'yes',
869	'eael_hover_effect_filter_hover_popover' => 'yes',
870	],
871	]
872	);
873	//Grayscale End
874
875	//Invert Start
876	$element->add_control(
877	'eael_hover_effect_invert_hover_is_on',
878	[
879	'label' => __( 'Invert', 'essential-addons-for-elementor-lite' ),
880	'type' => Controls_Manager::SWITCHER,
881	'condition' => [
882	'eael_hover_effect_filter_hover_popover' => 'yes',
883	],
884	]
885	);
886
887	$element->add_control(
888	'eael_hover_effect_invert_hover',
889	[
890	'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
891	'type' => Controls_Manager::SLIDER,
892	'frontend_available' => true,
893	'size_units' => ['%'],
894	'default' => [
895	'unit' => '%',
896	'size' => 0,
897	],
898	'range' => [
899	'%' => [
900	'max' => 100,
901	'step' => 10,
902	],
903	],
904	'condition' => [
905	'eael_hover_effect_invert_hover_is_on' => 'yes',
906	'eael_hover_effect_filter_hover_popover' => 'yes',
907	],
908	]
909	);
910	//Invert End
911
912	//Saturate Start
913	$element->add_control(
914	'eael_hover_effect_saturate_hover_is_on',
915	[
916	'label' => __( 'Saturate', 'essential-addons-for-elementor-lite' ),
917	'type' => Controls_Manager::SWITCHER,
918	'condition' => [
919	'eael_hover_effect_filter_hover_popover' => 'yes',
920	],
921	]
922	);
923
924	$element->add_control(
925	'eael_hover_effect_saturate_hover',
926	[
927	'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
928	'type' => Controls_Manager::SLIDER,
929	'frontend_available' => true,
930	'size_units' => ['%'],
931	'default' => [
932	'unit' => '%',
933	'size' => 100,
934	],
935	'range' => [
936	'%' => [
937	'max' => 1000,
938	'step' => 10,
939	],
940	],
941	'condition' => [
942	'eael_hover_effect_saturate_hover_is_on' => 'yes',
943	'eael_hover_effect_filter_hover_popover' => 'yes',
944	],
945	]
946	);
947	//Saturate End
948
949	//Sepia Start
950	$element->add_control(
951	'eael_hover_effect_sepia_hover_is_on',
952	[
953	'label' => __( 'Sepia', 'essential-addons-for-elementor-lite' ),
954	'type' => Controls_Manager::SWITCHER,
955	'condition' => [
956	'eael_hover_effect_filter_hover_popover' => 'yes',
957	],
958	]
959	);
960
961	$element->add_control(
962	'eael_hover_effect_sepia_hover',
963	[
964	'label' => __( 'Value', 'essential-addons-for-elementor-lite' ),
965	'type' => Controls_Manager::SLIDER,
966	'frontend_available' => true,
967	'default' => [
968	'size' => 1,
969	],
970	'range' => [
971	'%' => [
972	'max' => 100,
973	'step' => 10,
974	],
975	],
976	'condition' => [
977	'eael_hover_effect_sepia_hover_is_on' => 'yes',
978	'eael_hover_effect_filter_hover_popover' => 'yes',
979	],
980	]
981	);
982	//Sepia End
983	$element->end_popover();
984	//Filter End
985
986	//Offset Hover Start
987	$element->add_control(
988	'eael_hover_effect_offset_hover_popover',
989	[
990	'label' => __( 'Offset', 'essential-addons-for-elementor-lite' ),
991	'type' => Controls_Manager::POPOVER_TOGGLE,
992	'return_value' => 'yes',
993	'frontend_available' => true,
994	'condition' => [
995	'eael_hover_effect_switch' => 'yes',
996	]
997	]
998	);
999	$element->start_popover();
1000	$element->add_responsive_control(
1001	'eael_hover_effect_offset_hover_left',
1002	[
1003	'label' => __( 'Offset Top', 'essential-addons-for-elementor-lite' ),
1004	'type' => Controls_Manager::SLIDER,
1005	'frontend_available' => true,
1006	'size_units' => ['px', '%'],
1007	'default' => [
1008	'unit' => 'px',
1009	'size' => 0,
1010	],
1011	'range' => [
1012	'px' => [
1013	'max' => 500,
1014	'min' => -500,
1015	'step' => 1,
1016	],
1017	'%' => [
1018	'max' => 100,
1019	'min' => -100,
1020	'step' => 1,
1021	],
1022	],
1023	'condition' => [
1024	'eael_hover_effect_offset_hover_popover' => 'yes',
1025	],
1026	]
1027	);
1028
1029	$element->add_responsive_control(
1030	'eael_hover_effect_offset_hover_top',
1031	[
1032	'label' => __( 'Offset Left', 'essential-addons-for-elementor-lite' ),
1033	'type' => Controls_Manager::SLIDER,
1034	'frontend_available' => true,
1035	'size_units' => ['px', '%'],
1036	'default' => [
1037	'unit' => 'px',
1038	'size' => 0,
1039	],
1040	'range' => [
1041	'px' => [
1042	'max' => 500,
1043	'min' => -500,
1044	'step' => 1,
1045	],
1046	'%' => [
1047	'max' => 100,
1048	'min' => -100,
1049	'step' => 1,
1050	],
1051	],
1052	'condition' => [
1053	'eael_hover_effect_offset_hover_popover' => 'yes',
1054	],
1055	]
1056	);
1057	$element->end_popover();
1058	//Offset End
1059
1060	//Transform Hover Start
1061	$element->add_control(
1062	'eael_hover_effect_transform_hover_popover',
1063	[
1064	'label' => __( 'Transform', 'essential-addons-for-elementor-lite' ),
1065	'type' => Controls_Manager::POPOVER_TOGGLE,
1066	'return_value' => 'yes',
1067	'frontend_available' => true,
1068	'condition' => [
1069	'eael_hover_effect_switch' => 'yes',
1070	]
1071	]
1072	);
1073
1074	//Rotate Start
1075	$element->start_popover();
1076	$element->add_control(
1077	'eael_hover_effect_rotate_hover_is_on',
1078	[
1079	'label' => __( 'Rotate', 'essential-addons-for-elementor-lite' ),
1080	'type' => Controls_Manager::SWITCHER,
1081	'condition' => [
1082	'eael_hover_effect_transform_hover_popover' => 'yes',
1083	]
1084	]
1085	);
1086
1087	$element->add_responsive_control(
1088	'eael_hover_effect_transform_hover_rotatex',
1089	[
1090	'label' => esc_html__( 'RotateX (deg)', 'essential-addons-for-elementor-lite' ),
1091	'type' => \Elementor\Controls_Manager::SLIDER,
1092	'range' => [
1093	'px' => [
1094	'min' => -180,
1095	'max' => 180,
1096	'step' => 1,
1097	],
1098	],
1099	'default' => [
1100	'size' => 0,
1101	],
1102	'condition' => [
1103	'eael_hover_effect_rotate_hover_is_on' => 'yes',
1104	'eael_hover_effect_transform_hover_popover' => 'yes',
1105	],
1106	]
1107	);
1108
1109	$element->add_responsive_control(
1110	'eael_hover_effect_transform_hover_rotatey',
1111	[
1112	'label' => esc_html__( 'RotateY (deg)', 'essential-addons-for-elementor-lite' ),
1113	'type' => \Elementor\Controls_Manager::SLIDER,
1114	'range' => [
1115	'px' => [
1116	'min' => -180,
1117	'max' => 180,
1118	'step' => 1,
1119	],
1120	],
1121	'default' => [
1122	'size' => 0,
1123	],
1124	'condition' => [
1125	'eael_hover_effect_rotate_hover_is_on' => 'yes',
1126	'eael_hover_effect_transform_hover_popover' => 'yes',
1127	],
1128	]
1129	);
1130
1131	$element->add_responsive_control(
1132	'eael_hover_effect_transform_hover_rotatez',
1133	[
1134	'label' => esc_html__( 'RotateZ (deg)', 'essential-addons-for-elementor-lite' ),
1135	'type' => \Elementor\Controls_Manager::SLIDER,
1136	'range' => [
1137	'px' => [
1138	'min' => -180,
1139	'max' => 180,
1140	'step' => 1,
1141	],
1142	],
1143	'default' => [
1144	'size' => 0,
1145	],
1146	'condition' => [
1147	'eael_hover_effect_rotate_hover_is_on' => 'yes',
1148	'eael_hover_effect_transform_hover_popover' => 'yes',
1149	],
1150	]
1151	);
1152	//Rotate End
1153
1154	//Scale Start
1155	$element->add_control(
1156	'eael_hover_effect_scale_hover_is_on',
1157	[
1158	'label' => __( 'Scale', 'essential-addons-for-elementor-lite' ),
1159	'type' => Controls_Manager::SWITCHER,
1160	'condition' => [
1161	'eael_hover_effect_transform_hover_popover' => 'yes',
1162	],
1163	]
1164	);
1165
1166	$element->add_responsive_control(
1167	'eael_hover_effect_transform_hover_scalex',
1168	[
1169	'label' => esc_html__( 'ScaleX', 'essential-addons-for-elementor-lite' ),
1170	'type' => \Elementor\Controls_Manager::SLIDER,
1171	'range' => [
1172	'px' => [
1173	'max' => 3,
1174	'step' => 0.1,
1175	],
1176	],
1177	'default' => [
1178	'size' => 1,
1179	],
1180	'condition' => [
1181	'eael_hover_effect_scale_hover_is_on' => 'yes',
1182	'eael_hover_effect_transform_hover_popover' => 'yes',
1183	],
1184	]
1185	);
1186
1187	$element->add_responsive_control(
1188	'eael_hover_effect_transform_hover_scaley',
1189	[
1190	'label' => esc_html__( 'ScaleY', 'essential-addons-for-elementor-lite' ),
1191	'type' => \Elementor\Controls_Manager::SLIDER,
1192	'range' => [
1193	'px' => [
1194	'max' => 3,
1195	'step' => 0.1,
1196	],
1197	],
1198	'default' => [
1199	'size' => 0,
1200	],
1201	'condition' => [
1202	'eael_hover_effect_scale_hover_is_on' => 'yes',
1203	'eael_hover_effect_transform_hover_popover' => 'yes',
1204	],
1205	]
1206	);
1207	//Scale End
1208
1209	//Skew
1210	$element->add_control(
1211	'eael_hover_effect_skew_hover_is_on',
1212	[
1213	'label' => __( 'Skew', 'essential-addons-for-elementor-lite' ),
1214	'type' => Controls_Manager::SWITCHER,
1215	'condition' => [
1216	'eael_hover_effect_transform_hover_popover' => 'yes',
1217	],
1218	]
1219	);
1220
1221	$element->add_responsive_control(
1222	'eael_hover_effect_transform_hover_skewx',
1223	[
1224	'label' => esc_html__( 'SkewX (deg)', 'essential-addons-for-elementor-lite' ),
1225	'type' => \Elementor\Controls_Manager::SLIDER,
1226	'range' => [
1227	'px' => [
1228	'min' => 0,
1229	'max' => 180,
1230	'step' => 1,
1231	],
1232	],
1233	'default' => [
1234	'size' => 0,
1235	],
1236	'condition' => [
1237	'eael_hover_effect_skew_hover_is_on' => 'yes',
1238	'eael_hover_effect_transform_hover_popover' => 'yes',
1239	],
1240	]
1241	);
1242
1243	$element->add_responsive_control(
1244	'eael_hover_effect_transform_hover_skewy',
1245	[
1246	'label' => esc_html__( 'SkewY (deg)', 'essential-addons-for-elementor-lite' ),
1247	'type' => \Elementor\Controls_Manager::SLIDER,
1248	'range' => [
1249	'px' => [
1250	'min' => 0,
1251	'max' => 180,
1252	'step' => 1,
1253	],
1254	],
1255	'default' => [
1256	'size' => 0,
1257	],
1258	'condition' => [
1259	'eael_hover_effect_skew_hover_is_on' => 'yes',
1260	'eael_hover_effect_transform_hover_popover' => 'yes',
1261	],
1262	]
1263	);
1264	//Skew End
1265	$element->end_popover();
1266
1267	// General Settings
1268	$element->add_control(
1269	'eael_hover_effect_general_settings_hover_heading',
1270	[
1271	'label' => __( 'General Settings', 'essential-addons-for-elementor-lite' ),
1272	'type' => Controls_Manager::HEADING,
1273	'separator' => 'before',
1274	'condition' => [
1275	'eael_hover_effect_switch' => 'yes',
1276	]
1277	]
1278	);
1279
1280	//Duration
1281	$element->add_control(
1282	'eael_hover_effect_general_settings_hover_duration',
1283	[
1284	'label' => __( 'Duration (ms)', 'essential-addons-for-elementor-lite' ),
1285	'type' => Controls_Manager::SLIDER,
1286	'range' => [
1287	'px' => [
1288	'min' => 0,
1289	'max' => 10000,
1290	'step' => 100,
1291	],
1292	],
1293	'default' => [
1294	'unit' => 'px',
1295	'size' => 1000,
1296	],
1297	'condition' => [
1298	'eael_hover_effect_switch' => 'yes',
1299	]
1300	]
1301	);
1302
1303	//Delay
1304	$element->add_control(
1305	'eael_hover_effect_general_settings_hover_delay',
1306	[
1307	'label' => __( 'Delay (ms)', 'essential-addons-for-elementor-lite' ),
1308	'type' => Controls_Manager::SLIDER,
1309	'range' => [
1310	'px' => [
1311	'min' => 0,
1312	'max' => 10000,
1313	'step' => 100,
1314	],
1315	],
1316	'condition' => [
1317	'eael_hover_effect_switch' => 'yes',
1318	]
1319	]
1320	);
1321
1322	//Easing
1323	$element->add_control(
1324	'eael_hover_effect_general_settings_hover_easing',
1325	[
1326	'label' => __( 'Easing', 'essential-addons-for-elementor-lite' ),
1327	'type' => Controls_Manager::SELECT,
1328	'default' => 'ease',
1329	'frontend_available' => true,
1330	'options' => [
1331	'ease' => __( 'Default', 'essential-addons-for-elementor-lite' ),
1332	'ease-in' => __( 'Ease-in', 'essential-addons-for-elementor-lite' ),
1333	'ease-out' => __( 'Ease-out', 'essential-addons-for-elementor-lite' ),
1334	'ease-in-out' => __( 'Ease-in-out', 'essential-addons-for-elementor-lite' ),
1335	],
1336	'condition' => [
1337	'eael_hover_effect_switch' => 'yes',
1338	]
1339	]
1340	);
1341
1342	$element->add_control(
1343	'eael_hover_effect_hover_tilt',
1344	[
1345	'label' => esc_html__( 'Tilt Effect', 'essential-addons-for-elementor-lite' ),
1346	'type' => \Elementor\Controls_Manager::SWITCHER,
1347	'label_on' => esc_html__( 'On', 'essential-addons-for-elementor-lite' ),
1348	'label_off' => esc_html__( 'Off', 'essential-addons-for-elementor-lite' ),
1349	'return_value' => 'yes',
1350	'condition' => [
1351	'eael_hover_effect_switch' => 'yes',
1352	]
1353	]
1354	);
1355
1356	$element->end_controls_tab();
1357	$element->end_controls_tabs();
1358
1359	$element->end_controls_section();
1360	}
1361
1362	public function before_render( $element ) {
1363	$settings = $element->get_settings_for_display();
1364
1365	/**
1366	* Normal Effect Options
1367	*/
1368	//Opacity
1369	if( !empty( $settings['eael_hover_effect_switch'] ) ) {
1370	if( !empty( $settings['eael_hover_effect_opacity']['size'] ) ) {
1371	$opacity_settings = [
1372	'opacity' => $settings['eael_hover_effect_opacity']['size'],
1373	];
1374	$element->add_render_attribute( '_wrapper', 'data-eael_opacity', wp_json_encode( $opacity_settings ) );
1375	}
1376
1377	//Blur Effect
1378	if( 'yes' == $settings['eael_hover_effect_blur_is_on'] ) {
1379	$blur_settings = [
1380	'blur' => $settings['eael_hover_effect_blur']['size']
1381	];
1382	$element->add_render_attribute( '_wrapper', 'data-eael_blur_effect', wp_json_encode( $blur_settings ) );
1383	}
1384
1385	//Contrast Effect
1386	if( 'yes' == $settings['eael_hover_effect_contrast_is_on'] ) {
1387	$contrast_settings = [
1388	'contrast' => $settings['eael_hover_effect_contrast']['size']
1389	];
1390	$element->add_render_attribute( '_wrapper', 'data-eael_contrast_effect', wp_json_encode( $contrast_settings ) );
1391	}
1392
1393	//Grayscale Effect
1394	if( 'yes' == $settings['eael_hover_effect_grayscale_is_on'] ) {
1395	$grayscale_settings = [
1396	'grayscale' => $settings['eael_hover_effect_grayscal']['size']
1397	];
1398	$element->add_render_attribute( '_wrapper', 'data-eael_grayscale_effect', wp_json_encode( $grayscale_settings ) );
1399	}
1400
1401	//Invert Effect
1402	if( 'yes' == $settings['eael_hover_effect_invert_is_on'] ) {
1403	$invert_settings = [
1404	'invert' => $settings['eael_hover_effect_invert']['size']
1405	];
1406	$element->add_render_attribute( '_wrapper', 'data-eael_invert_effect', wp_json_encode( $invert_settings ) );
1407	}
1408
1409	//Saturate Effect
1410	if( 'yes' == $settings['eael_hover_effect_saturate_is_on'] ) {
1411	$saturate_settings = [
1412	'saturate' => $settings['eael_hover_effect_saturate']['size']
1413	];
1414	$element->add_render_attribute( '_wrapper', 'data-eael_saturate_effect', wp_json_encode( $saturate_settings ) );
1415	}
1416
1417	//Sepia Effect
1418	if( 'yes' == $settings['eael_hover_effect_sepia_is_on'] ) {
1419	$sepia_settings = [
1420	'sepia' => $settings['eael_hover_effect_sepia']['size']
1421	];
1422	$element->add_render_attribute( '_wrapper', 'data-eael_sepia_effect', wp_json_encode( $sepia_settings ) );
1423	}
1424
1425	//Offset Top
1426	if( !empty( $settings['eael_hover_effect_offset_top']['size'] ) ) {
1427	$offset_top_settings = [
1428	'size' => $settings['eael_hover_effect_offset_top']['size'],
1429	'unit' => $settings['eael_hover_effect_offset_top']['unit'],
1430	];
1431	$element->add_render_attribute( '_wrapper', 'data-eael_offset_top', wp_json_encode( $offset_top_settings ) );
1432	}
1433
1434	//Offset Left
1435	if( !empty( $settings['eael_hover_effect_offset_left']['size'] ) ) {
1436	$offset_left_settings = [
1437	'size' => $settings['eael_hover_effect_offset_left']['size'],
1438	'unit' => $settings['eael_hover_effect_offset_left']['unit'],
1439	];
1440	$element->add_render_attribute( '_wrapper', 'data-eael_offset_left', wp_json_encode( $offset_left_settings ) );
1441	}
1442
1443	//Rotate Effect
1444	if( 'yes' == $settings['eael_hover_effect_rotate_is_on'] ) {
1445	$rotate_settings = [
1446	'rotate_x' => $settings['eael_hover_effect_transform_rotatex']['size'],
1447	'rotate_y' => $settings['eael_hover_effect_transform_rotatey']['size'],
1448	'rotate_z' => $settings['eael_hover_effect_transform_rotatez']['size'],
1449	];
1450	$element->add_render_attribute( '_wrapper', 'data-eael_rotate_effect', wp_json_encode( $rotate_settings ) );
1451	}
1452
1453	//Scale Effect
1454	if( 'yes' == $settings['eael_hover_effect_scale_is_on'] ) {
1455	$scale_settings = [
1456	'scale_x' => $settings['eael_hover_effect_transform_scalex']['size'],
1457	'scale_y' => $settings['eael_hover_effect_transform_scaley']['size'],
1458	];
1459	$element->add_render_attribute( '_wrapper', 'data-eael_scale_effect', wp_json_encode( $scale_settings ) );
1460	}
1461
1462	//Skew Effect
1463	if( 'yes' == $settings['eael_hover_effect_skew_is_on'] ) {
1464	$skew_settings = [
1465	'skew_x' => $settings['eael_hover_effect_transform_skewx']['size'],
1466	'skew_y' => $settings['eael_hover_effect_transform_skewy']['size'],
1467	];
1468	$element->add_render_attribute( '_wrapper', 'data-eael_skew_effect', wp_json_encode( $skew_settings ) );
1469	}
1470
1471	//Transition Duration
1472	if( !empty( $settings['eael_hover_effect_general_settings_duration']['size'] ) ) {
1473	$transition_duration_settings = [
1474	'transitionDuration' => $settings['eael_hover_effect_general_settings_duration']['size'],
1475	];
1476	$element->add_render_attribute( '_wrapper', 'data-eael_duration', wp_json_encode( $transition_duration_settings ) );
1477	}
1478
1479	//Transition Delay
1480	if( !empty( $settings['eael_hover_effect_general_settings_delay']['size'] ) ) {
1481	$transition_delay_settings = [
1482	'transitionDelay' => $settings['eael_hover_effect_general_settings_delay']['size'],
1483	];
1484	$element->add_render_attribute( '_wrapper', 'data-eael_delay', wp_json_encode( $transition_delay_settings ) );
1485	}
1486
1487	//Transition Easing
1488	if( !empty( $settings['eael_hover_effect_general_settings_easing'] ) ) {
1489	$transition_easing_settings = [
1490	'transitionEasing' => $settings['eael_hover_effect_general_settings_easing'],
1491	];
1492	$element->add_render_attribute( '_wrapper', 'data-eael_easing', wp_json_encode( $transition_easing_settings ) );
1493	}
1494
1495	/**
1496	* Hover Interactions Options
1497	*/
1498	//Opacity
1499	if( !empty( $settings['eael_hover_effect_opacity_hover']['size'] ) ) {
1500	$opacity_settings = [
1501	'opacity' => $settings['eael_hover_effect_opacity_hover']['size'],
1502	];
1503	$element->add_render_attribute( '_wrapper', 'data-eael_opacity_hover', wp_json_encode( $opacity_settings ) );
1504	}
1505
1506	//blur
1507	if( 'yes' == $settings['eael_hover_effect_blur_hover_is_on'] ) {
1508	$blur_settings = [
1509	'blur' => $settings['eael_hover_effect_blur_hover']['size']
1510	];
1511	$element->add_render_attribute( '_wrapper', 'data-eael_blur_hover_effect', wp_json_encode( $blur_settings ) );
1512	}
1513
1514	//Contrast
1515	if( 'yes' == $settings['eael_hover_effect_contrast_hover_is_on'] ) {
1516	$contrast_settings = [
1517	'contrast' => $settings['eael_hover_effect_contrast_hover']['size']
1518	];
1519	$element->add_render_attribute( '_wrapper', 'data-eael_contrast_hover_effect', wp_json_encode( $contrast_settings ) );
1520	}
1521
1522	//Grayscale
1523	if( 'yes' == $settings['eael_hover_effect_grayscale_hover_is_on'] ) {
1524	$grayscale_settings = [
1525	'grayscale' => $settings['eael_hover_effect_grayscal_hover']['size']
1526	];
1527	$element->add_render_attribute( '_wrapper', 'data-eael_grayscal_hover_effect', wp_json_encode( $grayscale_settings ) );
1528	}
1529
1530	//Invert
1531	if( 'yes' == $settings['eael_hover_effect_invert_hover_is_on'] ) {
1532	$invert_settings = [
1533	'invert' => $settings['eael_hover_effect_invert_hover']['size']
1534	];
1535	$element->add_render_attribute( '_wrapper', 'data-eael_invert_hover_effect', wp_json_encode( $invert_settings ) );
1536	}
1537
1538	//Saturate
1539	if( 'yes' == $settings['eael_hover_effect_saturate_hover_is_on'] ) {
1540	$saturate_settings = [
1541	'saturate' => $settings['eael_hover_effect_saturate_hover']['size']
1542	];
1543	$element->add_render_attribute( '_wrapper', 'data-eael_saturate_hover_effect', wp_json_encode( $saturate_settings ) );
1544	}
1545
1546	//Sepia
1547	if( 'yes' == $settings['eael_hover_effect_sepia_hover_is_on'] ) {
1548	$sepia_settings = [
1549	'sepia' => $settings['eael_hover_effect_sepia_hover']['size']
1550	];
1551	$element->add_render_attribute( '_wrapper', 'data-eael_sepia_hover_effect', wp_json_encode( $sepia_settings ) );
1552	}
1553
1554	//Offset Top
1555	if( !empty( $settings['eael_hover_effect_offset_hover_top']['size'] ) ) {
1556	$offset_top_settings = [
1557	'size' => $settings['eael_hover_effect_offset_hover_top']['size'],
1558	'unit' => $settings['eael_hover_effect_offset_hover_top']['unit'],
1559	];
1560	$element->add_render_attribute( '_wrapper', 'data-eael_offset_hover_top', wp_json_encode( $offset_top_settings ) );
1561	}
1562
1563	//Offset Left
1564	if( !empty( $settings['eael_hover_effect_offset_hover_left']['size'] ) ) {
1565	$offset_left_settings = [
1566	'size' => $settings['eael_hover_effect_offset_hover_left']['size'],
1567	'unit' => $settings['eael_hover_effect_offset_hover_left']['unit'],
1568	];
1569	$element->add_render_attribute( '_wrapper', 'data-eael_offset_hover_left', wp_json_encode( $offset_left_settings ) );
1570	}
1571
1572	//Rotate
1573	if( 'yes' == $settings['eael_hover_effect_rotate_hover_is_on'] ) {
1574	$rotate_settings = [
1575	'rotate_x' => $settings['eael_hover_effect_transform_hover_rotatex']['size'],
1576	'rotate_y' => $settings['eael_hover_effect_transform_hover_rotatey']['size'],
1577	'rotate_z' => $settings['eael_hover_effect_transform_hover_rotatez']['size'],
1578	];
1579	$element->add_render_attribute( '_wrapper', 'data-eael_rotate_hover_effect', wp_json_encode( $rotate_settings ) );
1580	}
1581
1582	//Scale Effect
1583	if( 'yes' == $settings['eael_hover_effect_scale_hover_is_on'] ) {
1584	$scale_settings = [
1585	'scale_x' => $settings['eael_hover_effect_transform_hover_scalex']['size'],
1586	'scale_y' => $settings['eael_hover_effect_transform_hover_scaley']['size'],
1587	];
1588	$element->add_render_attribute( '_wrapper', 'data-eael_scale_hover_effect', wp_json_encode( $scale_settings ) );
1589	}
1590
1591	//Skew Effect
1592	if( 'yes' == $settings['eael_hover_effect_skew_hover_is_on'] ) {
1593	$skew_settings = [
1594	'skew_x' => $settings['eael_hover_effect_transform_hover_skewx']['size'],
1595	'skew_y' => $settings['eael_hover_effect_transform_hover_skewy']['size'],
1596	];
1597	$element->add_render_attribute( '_wrapper', 'data-eael_skew_hover_effect', wp_json_encode( $skew_settings ) );
1598	}
1599
1600	//Transition Duration
1601	if( !empty( $settings['eael_hover_effect_general_settings_hover_duration']['size'] ) ) {
1602	$transition_duration_settings = [
1603	'transitionDuration' => $settings['eael_hover_effect_general_settings_hover_duration']['size'],
1604	];
1605	$element->add_render_attribute( '_wrapper', 'data-eael_hover_duration', wp_json_encode( $transition_duration_settings ) );
1606	}
1607
1608	//Transition Delay
1609	if( !empty( $settings['eael_hover_effect_general_settings_hover_delay']['size'] ) ) {
1610	$transition_delay_settings = [
1611	'transitionDelay' => $settings['eael_hover_effect_general_settings_hover_delay']['size'],
1612	];
1613	$element->add_render_attribute( '_wrapper', 'data-eael_hover_delay', wp_json_encode( $transition_delay_settings ) );
1614	}
1615
1616	//Transition Easing
1617	if( !empty( $settings['eael_hover_effect_general_settings_hover_easing'] ) ) {
1618	$transition_easing_settings = [
1619	'transitionEasing' => $settings['eael_hover_effect_general_settings_hover_easing'],
1620	];
1621	$element->add_render_attribute( '_wrapper', 'data-eael_hover_easing', wp_json_encode( $transition_easing_settings ) );
1622	}
1623
1624	//Tilt
1625	if( !empty( $settings['eael_hover_effect_hover_tilt'] ) ) {
1626	$element->add_render_attribute( '_wrapper', 'data-eaeltilt', 'eael_tilt' );
1627	}
1628
1629	$element->add_render_attribute( '_wrapper', 'class', 'eael_hover_effect' );
1630
1631	?>
1632	<?php
1633	}
1634	}
1635
1636	}
1637