PluginProbe
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder / 51.1.83
King Addons for Elementor – 100+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce Builder, Mega Menu, Popup Builder v51.1.83
51.1.84 51.1.85 51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 51.1.46 All 39 releases
← All changes | includes/widgets/Image_Hover_Box/Image_Hover_Box.php +877 -0 51.1.2 → 51.1.83 View file →
@@ -1,0 +1,877 @@
1 +<?php /** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
2 +
3 +namespace King_Addons;
4 +
5 +use Elementor\Controls_Manager;
6 +use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
7 +use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
8 +use Elementor\Group_Control_Background;
9 +use Elementor\Group_Control_Border;
10 +use Elementor\Group_Control_Box_Shadow;
11 +use Elementor\Group_Control_Css_Filter;
12 +use Elementor\Group_Control_Image_Size;
13 +use Elementor\Group_Control_Text_Shadow;
14 +use Elementor\Group_Control_Typography;
15 +use Elementor\Utils;
16 +use Elementor\Widget_Base;
17 +
18 +if (!defined('ABSPATH')) {
19 + exit; // Exit if accessed directly.
20 +}
21 +
22 +
23 +
24 +class Image_Hover_Box extends Widget_Base
25 +{
26 +
27 +
28 + public function get_name(): string
29 + {
30 + return 'king-addons-image-hover-box';
31 + }
32 +
33 + public function get_title(): string
34 + {
35 + return esc_html__('Image Hover Box', 'king-addons');
36 + }
37 +
38 + public function get_icon(): string
39 + {
40 + return 'king-addons-icon king-addons-image-hover-box';
41 + }
42 +
43 + public function get_style_depends(): array
44 + {
45 + return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-image-hover-box-style'];
46 + }
47 +
48 + public function get_categories(): array
49 + {
50 + return ['king-addons'];
51 + }
52 +
53 + public function get_keywords(): array
54 + {
55 + return ['image', 'images', 'before', 'after', 'before-after', 'compare', 'hover', 'slider', 'scroll', 'box',
56 + 'photo', 'photos', 'picture', 'scrolling', 'scroller', 'scrollable', 'animation', 'effect', 'animated',
57 + 'image hover over', 'image hover', 'hover box', 'image box', 'image layout', 'layout', 'image hover box',
58 + 'vertical', 'horizontal', 'mouse', 'hover', 'over', 'hover over', 'picture', 'king', 'addons', 'mouseover',
59 + 'slide', 'background', 'arrow', 'arrows', 'kingaddons', 'king-addons', 'info box', 'info', 'cta', 'banner',
60 + 'layout', 'animated box', 'hover text', 'text box', 'text banner'];
61 + }
62 +
63 + public function get_custom_help_url()
64 + {
65 + return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
66 + }
67 +
68 + protected function register_controls(): void
69 + {
70 + $this->start_controls_section(
71 + 'king_addons_image_hover_box_section_image',
72 + [
73 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Image', 'king-addons'),
74 + ]
75 + );
76 +
77 + $this->add_control(
78 + 'king_addons_image_hover_box_image',
79 + [
80 + 'label' => esc_html__('Upload Image', 'king-addons'),
81 + 'type' => Controls_Manager::MEDIA,
82 + 'dynamic' => array('active' => true),
83 + 'default' => array(
84 + 'url' => Utils::get_placeholder_image_src(),
85 + ),
86 + 'show_external' => true,
87 + ]
88 + );
89 +
90 + $this->add_group_control(
91 + Group_Control_Image_Size::get_type(),
92 + [
93 + 'name' => 'king_addons_image_hover_box_image_size',
94 + 'default' => 'full',
95 + ]
96 + );
97 +
98 + $this->add_control(
99 + 'king_addons_image_hover_box_image_custom_link',
100 + [
101 + 'label' => esc_html__('Link', 'king-addons'),
102 + 'type' => Controls_Manager::URL,
103 + 'dynamic' => array('active' => true),
104 + 'show_external' => false,
105 + ]
106 + );
107 +
108 + $this->add_control(
109 + 'king_addons_image_hover_box_image_layout',
110 + [
111 + 'label' => '<b>' . esc_html__('Layout (effect)', 'king-addons') . '</b>',
112 + 'type' => Controls_Manager::SELECT,
113 + 'default' => 'layout-1',
114 + 'options' => array(
115 + 'layout-1' => esc_html__('Slide Up 1', 'king-addons'),
116 + 'layout-2' => esc_html__('Slide Up 2', 'king-addons'),
117 + 'layout-5' => esc_html__('Slide Up 3', 'king-addons'),
118 + 'layout-10' => esc_html__('Slide Line Up', 'king-addons'),
119 + 'layout-3' => esc_html__('Slide Line Right', 'king-addons'),
120 + 'layout-4' => esc_html__('Slide Border 1', 'king-addons'),
121 + 'layout-6' => esc_html__('Slide Border 2', 'king-addons'),
122 + 'layout-7' => esc_html__('Opacity Angles', 'king-addons'),
123 + 'layout-8' => esc_html__('Opacity Borders', 'king-addons'),
124 + 'layout-9' => esc_html__('Crossing', 'king-addons'),
125 + 'layout-11' => esc_html__('Magic Overlay', 'king-addons'),
126 + ),
127 + ]
128 + );
129 +
130 + $this->add_control(
131 + 'king_addons_image_hover_box_active',
132 + [
133 + 'label' => esc_html__('Always Hovered', 'king-addons'),
134 + 'type' => Controls_Manager::SWITCHER,
135 + ]
136 + );
137 +
138 + $this->add_control(
139 + 'king_addons_image_hover_box_hover_effect',
140 + [
141 + 'label' => esc_html__('Hover Effect', 'king-addons'),
142 + 'type' => Controls_Manager::SELECT,
143 + 'options' => array(
144 + 'none' => esc_html__('None', 'king-addons'),
145 + 'zoom-in' => esc_html__('Zoom In', 'king-addons'),
146 + 'zoom-out' => esc_html__('Zoom Out', 'king-addons'),
147 + 'scale' => esc_html__('Scale', 'king-addons'),
148 + 'grayscale' => esc_html__('Grayscale', 'king-addons'),
149 + 'blur' => esc_html__('Blur', 'king-addons'),
150 + 'bright' => esc_html__('Bright', 'king-addons'),
151 + 'sepia' => esc_html__('Sepia', 'king-addons'),
152 + ),
153 + 'default' => 'none',
154 + ]
155 + );
156 +
157 + $this->add_control(
158 + 'king_addons_image_hover_box_height',
159 + [
160 + 'label' => esc_html__('Height', 'king-addons'),
161 + 'type' => Controls_Manager::SELECT,
162 + 'options' => array(
163 + 'default' => esc_html__('Default (auto)', 'king-addons'),
164 + 'custom' => esc_html__('Custom', 'king-addons'),
165 + ),
166 + 'default' => 'default',
167 + ]
168 + );
169 +
170 + $this->add_responsive_control(
171 + 'king_addons_image_hover_box_custom_height',
172 + [
173 + 'label' => esc_html__('Height', 'king-addons'),
174 + 'type' => Controls_Manager::SLIDER,
175 + 'size_units' => array('px', 'em', 'vh', 'custom'),
176 + 'condition' => array(
177 + 'king_addons_image_hover_box_height' => 'custom',
178 + ),
179 + 'default' => array(
180 + 'size' => 300,
181 + ),
182 + 'range' => array(
183 + 'px' => array(
184 + 'min' => 1,
185 + 'max' => 600,
186 + ),
187 + ),
188 + 'selectors' => array(
189 + '{{WRAPPER}} .king-addons-image-hover-box img' => 'height: {{SIZE}}{{UNIT}};',
190 + ),
191 + ]
192 + );
193 +
194 + $this->add_responsive_control(
195 + 'king_addons_image_hover_box_image_fit',
196 + [
197 + 'label' => esc_html__('Image Fit', 'king-addons'),
198 + 'type' => Controls_Manager::SELECT,
199 + 'options' => array(
200 + 'cover' => esc_html__('Cover', 'king-addons'),
201 + 'fill' => esc_html__('Fill', 'king-addons'),
202 + 'contain' => esc_html__('Contain', 'king-addons'),
203 + ),
204 + 'default' => 'cover',
205 + 'selectors' => array(
206 + '{{WRAPPER}} .king-addons-image-hover-box img' => 'object-fit: {{VALUE}}',
207 + ),
208 + 'condition' => array(
209 + 'king_addons_image_hover_box_height' => 'custom',
210 + ),
211 + ]
212 + );
213 +
214 + $this->add_responsive_control(
215 + 'king_addons_image_hover_box_image_fit_position',
216 + [
217 + 'label' => esc_html__('Image Fit Position', 'king-addons'),
218 + 'type' => Controls_Manager::SELECT,
219 + 'options' => [
220 + 'top' => esc_html__('Top', 'king-addons'),
221 + 'bottom' => esc_html__('Bottom', 'king-addons'),
222 + 'left' => esc_html__('Left', 'king-addons'),
223 + 'right' => esc_html__('Right', 'king-addons'),
224 + 'center' => esc_html__('Center', 'king-addons'),
225 + ],
226 + 'default' => 'center',
227 + 'selectors' => [
228 + '{{WRAPPER}} .king-addons-image-hover-box img' => 'object-position: {{VALUE}};',
229 + ],
230 + 'condition' => array(
231 + 'king_addons_image_hover_box_height' => 'custom',
232 + ),
233 + ]
234 + );
235 +
236 + $this->end_controls_section();
237 +
238 + $this->start_controls_section(
239 + 'king_addons_image_hover_box_section_texts',
240 + [
241 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Texts', 'king-addons'),
242 + ]
243 + );
244 +
245 + $this->add_control(
246 + 'king_addons_image_hover_box_title',
247 + [
248 + 'label' => '<b>' . esc_html__('Title', 'king-addons') . '</b>',
249 + 'placeholder' => esc_html__('Title', 'king-addons'),
250 + 'type' => Controls_Manager::TEXT,
251 + 'dynamic' => array('active' => true),
252 + 'default' => esc_html__('Title', 'king-addons'),
253 + 'label_block' => true,
254 + ]
255 + );
256 +
257 + $this->add_control(
258 + 'king_addons_image_hover_box_title_tag',
259 + [
260 + 'label' => esc_html__('HTML Tag', 'king-addons'),
261 + 'type' => Controls_Manager::SELECT,
262 + 'default' => 'h3',
263 + 'options' => array(
264 + 'h1' => 'H1',
265 + 'h2' => 'H2',
266 + 'h3' => 'H3',
267 + 'h4' => 'H4',
268 + 'h5' => 'H5',
269 + 'h6' => 'H6',
270 + 'div' => 'div',
271 + 'span' => 'span',
272 + 'p' => 'p',
273 + ),
274 + 'label_block' => true,
275 + ]
276 + );
277 +
278 + $this->add_control(
279 + 'king_addons_image_hover_box_description_hint',
280 + [
281 + 'label' => esc_html__('Description', 'king-addons'),
282 + 'type' => Controls_Manager::HEADING,
283 + ]
284 + );
285 +
286 + $this->add_control(
287 + 'king_addons_image_hover_box_description',
288 + [
289 + 'label' => esc_html__('Description', 'king-addons'),
290 + 'type' => Controls_Manager::WYSIWYG,
291 + 'dynamic' => array('active' => true),
292 + 'default' => esc_html__('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua', 'king-addons'),
293 + 'label_block' => true,
294 + ]
295 + );
296 +
297 + $this->add_control(
298 + 'king_addons_image_hover_box_title_text_align',
299 + [
300 + 'label' => esc_html__('Alignment', 'king-addons'),
301 + 'type' => Controls_Manager::CHOOSE,
302 + 'options' => array(
303 + 'left' => array(
304 + 'title' => esc_html__('Left', 'king-addons'),
305 + 'icon' => 'eicon-text-align-left',
306 + ),
307 + 'center' => array(
308 + 'title' => esc_html__('Center', 'king-addons'),
309 + 'icon' => 'eicon-text-align-center',
310 + ),
311 + 'right' => array(
312 + 'title' => esc_html__('Right', 'king-addons'),
313 + 'icon' => 'eicon-text-align-right',
314 + ),
315 + ),
316 + 'default' => 'left',
317 + 'toggle' => false,
318 + 'selectors' => array(
319 + '{{WRAPPER}} .king-addons-image-hover-box-text-title, {{WRAPPER}} .king-addons-image-hover-box-text-description' => 'text-align: {{VALUE}} ;',
320 + ),
321 + ]
322 + );
323 +
324 + $this->end_controls_section();
325 +
326 + $this->start_controls_section(
327 + 'king_addons_image_hover_box_opacity_style',
328 + [
329 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('General', 'king-addons'),
330 + 'tab' => Controls_Manager::TAB_STYLE,
331 + ]
332 + );
333 +
334 + $this->add_control(
335 + 'king_addons_image_hover_box_image_bg_color',
336 + [
337 + 'label' => esc_html__('Background Color', 'king-addons'),
338 + 'type' => Controls_Manager::COLOR,
339 + 'selectors' => array(
340 + '{{WRAPPER}} .king-addons-image-hover-box' => 'background: {{VALUE}};',
341 + ),
342 + ]
343 + );
344 +
345 + $this->add_control(
346 + 'king_addons_image_hover_box_image_opacity',
347 + [
348 + 'label' => esc_html__('Image Opacity', 'king-addons'),
349 + 'type' => Controls_Manager::SLIDER,
350 + 'default' => array(
351 + 'size' => 1,
352 + ),
353 + 'range' => array(
354 + 'px' => array(
355 + 'min' => 0,
356 + 'max' => 1,
357 + 'step' => .1,
358 + ),
359 + ),
360 + 'selectors' => array(
361 + '{{WRAPPER}} .king-addons-image-hover-box img' => 'opacity: {{SIZE}};',
362 + ),
363 + ]
364 + );
365 +
366 + $this->add_control(
367 + 'king_addons_image_hover_box_image_hover_opacity',
368 + [
369 + 'label' => esc_html__('Hover Opacity', 'king-addons'),
370 + 'type' => Controls_Manager::SLIDER,
371 + 'default' => array(
372 + 'size' => 1,
373 + ),
374 + 'range' => array(
375 + 'px' => array(
376 + 'min' => 0,
377 + 'max' => 1,
378 + 'step' => .1,
379 + ),
380 + ),
381 + 'separator' => 'after',
382 + 'selectors' => array(
383 + '{{WRAPPER}}:hover .king-addons-image-hover-box img' => 'opacity: {{SIZE}};',
384 + ),
385 + ]
386 + );
387 +
388 + $this->add_control(
389 + 'king_addons_image_hover_box_title_border_width',
390 + [
391 + 'label' => esc_html__('Hover Border Width', 'king-addons'),
392 + 'type' => Controls_Manager::SLIDER,
393 + 'size_units' => array('px', '%', 'em'),
394 + 'default' => array(
395 + 'size' => 2,
396 + ),
397 + 'condition' => array(
398 + 'king_addons_image_hover_box_image_layout' => array('layout-3', 'layout-9', 'layout-10'),
399 + ),
400 + 'selectors' => array(
401 + '{{WRAPPER}} .king-addons-image-hover-box-layout-3 .king-addons-image-hover-box-text-title::after' => 'height: {{size}}{{unit}};',
402 + '{{WRAPPER}} .king-addons-image-hover-box-layout-9 .king-addons-image-hover-box-text::before, {{WRAPPER}} .king-addons-image-hover-box-layout-9 .king-addons-image-hover-box-text::after' => 'height: {{size}}{{unit}};',
403 + '{{WRAPPER}} .king-addons-image-hover-box-layout-10 .king-addons-image-hover-box-text-title::after' => 'height: {{size}}{{unit}};',
404 + ),
405 + ]
406 + );
407 +
408 + $this->add_control(
409 + 'king_addons_image_hover_box_style3_title_border',
410 + [
411 + 'label' => esc_html__('Hover Border Color', 'king-addons'),
412 + 'type' => Controls_Manager::COLOR,
413 + 'condition' => array(
414 + 'king_addons_image_hover_box_image_layout' => array('layout-3', 'layout-9', 'layout-10'),
415 + ),
416 + 'separator' => 'after',
417 + 'selectors' => array(
418 + '{{WRAPPER}} .king-addons-image-hover-box-layout-3 .king-addons-image-hover-box-text-title::after' => 'background: {{VALUE}};',
419 + '{{WRAPPER}} .king-addons-image-hover-box-layout-9 .king-addons-image-hover-box-text::before, {{WRAPPER}} .king-addons-image-hover-box-layout-9 .king-addons-image-hover-box-text::after' => 'background: {{VALUE}};',
420 + '{{WRAPPER}} .king-addons-image-hover-box-layout-10 .king-addons-image-hover-box-text-title::after' => 'background: {{VALUE}};',
421 + ),
422 + ]
423 + );
424 +
425 + $this->add_control(
426 + 'king_addons_image_hover_box_inner_border_width',
427 + [
428 + 'label' => esc_html__('Hover Border Width', 'king-addons'),
429 + 'type' => Controls_Manager::SLIDER,
430 + 'size_units' => array('px', '%', 'em'),
431 + 'default' => array(
432 + 'size' => 2,
433 + ),
434 + 'condition' => array(
435 + 'king_addons_image_hover_box_image_layout' => array('layout-4', 'layout-6', 'layout-7', 'layout-8'),
436 + ),
437 + 'selectors' => array(
438 + '{{WRAPPER}} .king-addons-image-hover-box-layout-4 .king-addons-image-hover-box-text::after, {{WRAPPER}} .king-addons-image-hover-box-layout-4 .king-addons-image-hover-box-text::before, {{WRAPPER}} .king-addons-image-hover-box-layout-6 .king-addons-image-hover-box-text::before' => 'border-width: {{size}}{{unit}};',
439 + '{{WRAPPER}} .king-addons-image-hover-box-layout-7 .king-addons-image-hover-box-br.king-addons-image-hover-box-bleft, {{WRAPPER}} .king-addons-image-hover-box-layout-7 .king-addons-image-hover-box-br.king-addons-image-hover-box-bright , {{WRAPPER}} .king-addons-image-hover-box-layout-8 .king-addons-image-hover-box-br.king-addons-image-hover-box-bright,{{WRAPPER}} .king-addons-image-hover-box-layout-8 .king-addons-image-hover-box-br.king-addons-image-hover-box-bleft' => 'width: {{size}}{{unit}};',
440 + '{{WRAPPER}} .king-addons-image-hover-box-layout-7 .king-addons-image-hover-box-br.king-addons-image-hover-box-btop, {{WRAPPER}} .king-addons-image-hover-box-layout-7 .king-addons-image-hover-box-br.king-addons-image-hover-box-bottom , {{WRAPPER}} .king-addons-image-hover-box-layout-8 .king-addons-image-hover-box-br.king-addons-image-hover-box-bottom,{{WRAPPER}} .king-addons-image-hover-box-layout-8 .king-addons-image-hover-box-br.king-addons-image-hover-box-btop ' => 'height: {{size}}{{unit}};',
441 + ),
442 + ]
443 + );
444 +
445 + $this->add_control(
446 + 'king_addons_image_hover_box_scaled_border_color',
447 + [
448 + 'label' => esc_html__('Hover Border Color', 'king-addons'),
449 + 'type' => Controls_Manager::COLOR,
450 + 'condition' => array(
451 + 'king_addons_image_hover_box_image_layout' => array('layout-4', 'layout-6', 'layout-7', 'layout-8'),
452 + ),
453 + 'selectors' => array(
454 + '{{WRAPPER}} .king-addons-image-hover-box-layout-4 .king-addons-image-hover-box-text::after, {{WRAPPER}} .king-addons-image-hover-box-layout-4 .king-addons-image-hover-box-text::before, {{WRAPPER}} .king-addons-image-hover-box-layout-6 .king-addons-image-hover-box-text::before' => 'border-color: {{VALUE}};',
455 + '{{WRAPPER}} .king-addons-image-hover-box-layout-7 .king-addons-image-hover-box-br, {{WRAPPER}} .king-addons-image-hover-box-layout-8 .king-addons-image-hover-box-br' => 'background-color: {{VALUE}};',
456 + ),
457 + ]
458 + );
459 +
460 + $this->add_group_control(
461 + Group_Control_Css_Filter::get_type(),
462 + [
463 + 'name' => 'king_addons_image_hover_box_css_filters',
464 + 'selector' => '{{WRAPPER}} .king-addons-image-hover-box img',
465 + ]
466 + );
467 +
468 + $this->add_group_control(
469 + Group_Control_Css_Filter::get_type(),
470 + [
471 + 'name' => 'king_addons_image_hover_box_hover_css_filters',
472 + 'label' => esc_html__('Hover CSS Filters', 'king-addons'),
473 + 'selector' => '{{WRAPPER}}:hover .king-addons-image-hover-box img',
474 + ]
475 + );
476 +
477 + $this->add_group_control(
478 + Group_Control_Border::get_type(),
479 + [
480 + 'name' => 'king_addons_image_hover_box_image_border',
481 + 'selector' => '{{WRAPPER}} .king-addons-image-hover-box',
482 + ]
483 + );
484 +
485 + $this->add_control(
486 + 'king_addons_image_hover_box_image_border_radius',
487 + [
488 + 'label' => esc_html__('Border Radius', 'king-addons'),
489 + 'type' => Controls_Manager::DIMENSIONS,
490 + 'size_units' => array('px', '%', 'em'),
491 + 'selectors' => array(
492 + '{{WRAPPER}} .king-addons-image-hover-box, {{WRAPPER}} .king-addons-image-hover-box-gradient' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
493 + ),
494 + 'condition' => array(
495 + 'king_addons_image_hover_box_image_adv_radius!' => 'yes',
496 + ),
497 + ]
498 + );
499 +
500 + $this->add_control(
501 + 'king_addons_image_hover_box_image_adv_radius',
502 + [
503 + 'label' => esc_html__('Advanced Border Radius', 'king-addons'),
504 + 'type' => Controls_Manager::SWITCHER,
505 + 'description' => esc_html__('Apply custom radius values. Get the radius value from ', 'king-addons') . '<a href="https://9elements.github.io/fancy-border-radius/" target="_blank">here</a>',
506 + ]
507 + );
508 +
509 + $this->add_control(
510 + 'king_addons_image_hover_box_image_adv_radius_value',
511 + [
512 + 'label' => esc_html__('Border Radius', 'king-addons'),
513 + 'type' => Controls_Manager::TEXT,
514 + 'dynamic' => array('active' => true),
515 + 'selectors' => array(
516 + '{{WRAPPER}} .king-addons-image-hover-box, {{WRAPPER}} .king-addons-image-hover-box-gradient' => 'border-radius: {{VALUE}};',
517 + ),
518 + 'condition' => array(
519 + 'king_addons_image_hover_box_image_adv_radius' => 'yes',
520 + ),
521 + ]
522 + );
523 +
524 + $this->add_control(
525 + 'king_addons_image_hover_box_blend_mode',
526 + [
527 + 'label' => esc_html__('Blend Mode', 'king-addons'),
528 + 'type' => Controls_Manager::SELECT,
529 + 'options' => array(
530 + '' => esc_html__('Normal', 'king-addons'),
531 + 'multiply' => 'Multiply',
532 + 'screen' => 'Screen',
533 + 'overlay' => 'Overlay',
534 + 'darken' => 'Darken',
535 + 'lighten' => 'Lighten',
536 + 'color-dodge' => 'Color Dodge',
537 + 'saturation' => 'Saturation',
538 + 'color' => 'Color',
539 + 'luminosity' => 'Luminosity',
540 + ),
541 + 'separator' => 'before',
542 + 'selectors' => array(
543 + '{{WRAPPER}} .king-addons-image-hover-box' => 'mix-blend-mode: {{VALUE}}',
544 + ),
545 + ]
546 + );
547 +
548 + $this->end_controls_section();
549 +
550 + $this->start_controls_section(
551 + 'king_addons_image_hover_box_title_style',
552 + [
553 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Title', 'king-addons'),
554 + 'tab' => Controls_Manager::TAB_STYLE,
555 + ]
556 + );
557 +
558 + $this->add_control(
559 + 'king_addons_image_hover_box_color_of_title',
560 + [
561 + 'label' => esc_html__('Color', 'king-addons'),
562 + 'type' => Controls_Manager::COLOR,
563 + 'global' => array(
564 + 'default' => Global_Colors::COLOR_PRIMARY,
565 + ),
566 + 'selectors' => array(
567 + '{{WRAPPER}} .king-addons-image-hover-box-text .king-addons-image-hover-box-text-title' => 'color: {{VALUE}};',
568 + ),
569 + ]
570 + );
571 +
572 + $this->add_group_control(
573 + Group_Control_Typography::get_type(),
574 + [
575 + 'name' => 'king_addons_image_hover_box_title_typography',
576 + 'selector' => '{{WRAPPER}} .king-addons-image-hover-box-text .king-addons-image-hover-box-text-title',
577 + 'global' => array(
578 + 'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
579 + ),
580 + ]
581 + );
582 +
583 + $this->add_control(
584 + 'king_addons_image_hover_box_style2_title_bg',
585 + [
586 + 'label' => esc_html__('Background', 'king-addons'),
587 + 'type' => Controls_Manager::COLOR,
588 + 'default' => '#f2f2f2',
589 + 'description' => esc_html__('Choose a background color for the title', 'king-addons'),
590 + 'condition' => array(
591 + 'king_addons_image_hover_box_image_layout' => 'layout-5',
592 + ),
593 + 'selectors' => array(
594 + '{{WRAPPER}} .king-addons-image-hover-box-layout-5 .king-addons-image-hover-box-text' => 'background: {{VALUE}};',
595 + ),
596 + ]
597 + );
598 +
599 + $this->add_group_control(
600 + Group_Control_Text_Shadow::get_type(),
601 + [
602 + 'label' => esc_html__('Shadow', 'king-addons'),
603 + 'name' => 'king_addons_image_hover_box_title_shadow',
604 + 'selector' => '{{WRAPPER}} .king-addons-image-hover-box-text .king-addons-image-hover-box-text-title',
605 + ]
606 + );
607 +
608 + $this->add_responsive_control(
609 + 'king_addons_image_hover_box_title_margin',
610 + [
611 + 'label' => esc_html__('Margin', 'king-addons'),
612 + 'type' => Controls_Manager::DIMENSIONS,
613 + 'size_units' => array('px', 'em', '%'),
614 + 'selectors' => array(
615 + '{{WRAPPER}} .king-addons-image-hover-box-text-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
616 + ),
617 + ]
618 + );
619 +
620 + $this->end_controls_section();
621 +
622 + $this->start_controls_section(
623 + 'king_addons_image_hover_box_styles_of_content',
624 + [
625 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Description', 'king-addons'),
626 + 'tab' => Controls_Manager::TAB_STYLE,
627 + ]
628 + );
629 +
630 + $this->add_control(
631 + 'king_addons_image_hover_box_color_of_content',
632 + [
633 + 'label' => esc_html__('Color', 'king-addons'),
634 + 'type' => Controls_Manager::COLOR,
635 + 'global' => array(
636 + 'default' => Global_Colors::COLOR_TEXT,
637 + ),
638 + 'selectors' => array(
639 + '{{WRAPPER}} .king-addons-image-hover-box-text-description' => 'color: {{VALUE}};',
640 + ),
641 + ]
642 + );
643 +
644 + $this->add_group_control(
645 + Group_Control_Typography::get_type(),
646 + [
647 + 'name' => 'king_addons_image_hover_box_content_typography',
648 + 'selector' => '{{WRAPPER}} .king-addons-image-hover-box-text-description',
649 + 'global' => array(
650 + 'default' => Global_Typography::TYPOGRAPHY_TEXT,
651 + ),
652 + ]
653 + );
654 +
655 + $this->add_group_control(
656 + Group_Control_Text_Shadow::get_type(),
657 + [
658 + 'label' => esc_html__('Shadow', 'king-addons'),
659 + 'name' => 'king_addons_image_hover_box_description_shadow',
660 + 'selector' => '{{WRAPPER}} .king-addons-image-hover-box-text-description',
661 + ]
662 + );
663 +
664 + $this->add_responsive_control(
665 + 'king_addons_image_hover_box_desc_margin',
666 + [
667 + 'label' => esc_html__('Margin', 'king-addons'),
668 + 'type' => Controls_Manager::DIMENSIONS,
669 + 'size_units' => array('px', 'em', '%'),
670 + 'selectors' => array(
671 + '{{WRAPPER}} .king-addons-image-hover-box-text-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
672 + ),
673 + ]
674 + );
675 +
676 + $this->end_controls_section();
677 +
678 + $this->start_controls_section(
679 + 'king_addons_image_hover_box_section_whole_box',
680 + [
681 + 'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Whole Box', 'king-addons'),
682 + 'tab' => Controls_Manager::TAB_STYLE,
683 + ]
684 + );
685 +
686 + $this->add_group_control(
687 + Group_Control_Border::get_type(),
688 + [
689 + 'name' => 'king_addons_image_hover_box_border',
690 + 'selector' => '{{WRAPPER}}',
691 + ]
692 + );
693 +
694 + $this->add_control(
695 + 'king_addons_image_hover_box_border_radius',
696 + [
697 + 'label' => esc_html__('Border Radius', 'king-addons'),
698 + 'type' => Controls_Manager::DIMENSIONS,
699 + 'size_units' => array('px', '%', 'em'),
700 + 'selectors' => array(
701 + '{{WRAPPER}}, {{WRAPPER}} .king-addons-image-hover-box-gradient' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
702 + ),
703 + 'condition' => array(
704 + 'king_addons_image_hover_box_container_image_adv_radius!' => 'yes',
705 + ),
706 + ]
707 + );
708 +
709 + $this->add_control(
710 + 'king_addons_image_hover_box_container_image_adv_radius',
711 + [
712 + 'label' => esc_html__('Advanced Border Radius', 'king-addons'),
713 + 'type' => Controls_Manager::SWITCHER,
714 + 'description' => esc_html__('Apply custom radius values. Get the radius value from ', 'king-addons') . '<a href="https://9elements.github.io/fancy-border-radius/" target="_blank">here</a>',
715 + ]
716 + );
717 +
718 + $this->add_control(
719 + 'king_addons_image_hover_box_container_image_adv_radius_value',
720 + [
721 + 'label' => esc_html__('Border Radius', 'king-addons'),
722 + 'type' => Controls_Manager::TEXT,
723 + 'dynamic' => array('active' => true),
724 + 'selectors' => array(
725 + '{{WRAPPER}}' => 'border-radius: {{VALUE}};',
726 + ),
727 + 'condition' => array(
728 + 'king_addons_image_hover_box_container_image_adv_radius' => 'yes',
729 + ),
730 + ]
731 + );
732 +
733 + $this->add_group_control(
734 + Group_Control_Box_Shadow::get_type(),
735 + [
736 + 'name' => 'king_addons_image_hover_box_shadow',
737 + 'selector' => '{{WRAPPER}}',
738 + ]
739 + );
740 +
741 + $this->add_group_control(
742 + Group_Control_Background::get_type(),
743 + [
744 + 'name' => 'king_addons_image_hover_box_gradient_color',
745 + 'types' => array('gradient'),
746 + 'separator' => 'before',
747 + 'selector' => '{{WRAPPER}} .king-addons-image-hover-box-gradient:before, {{WRAPPER}} .king-addons-image-hover-box-gradient:after',
748 + 'condition' => array(
749 + 'king_addons_image_hover_box_image_layout' => 'layout-11',
750 + ),
751 + ]
752 + );
753 +
754 + $this->add_control(
755 + 'king_addons_image_hover_box_first_layer_speed',
756 + [
757 + 'label' => esc_html__('First Layer Transition Speed (seconds)', 'king-addons'),
758 + 'type' => Controls_Manager::SLIDER,
759 + 'default' => array(
760 + 'size' => 0.3,
761 + ),
762 + 'range' => array(
763 + 'px' => array(
764 + 'min' => 0,
765 + 'max' => 3,
766 + 'step' => 0.1,
767 + ),
768 + ),
769 + 'selectors' => array(
770 + '{{WRAPPER}} .king-addons-image-hover-box-layout-11:hover .king-addons-image-hover-box-gradient:after' => 'transition-delay: {{SIZE}}s',
771 + '{{WRAPPER}} .king-addons-image-hover-box-layout-11 .king-addons-image-hover-box-gradient:before' => 'transition: transform 0.3s ease-out {{SIZE}}s',
772 + ),
773 + 'condition' => array(
774 + 'king_addons_image_hover_box_image_layout' => 'layout-11',
775 + ),
776 + ]
777 + );
778 +
779 + $this->add_control(
780 + 'king_addons_image_hover_box_second_layer_speed',
781 + [
782 + 'label' => esc_html__('Second Layer Transition Delay (seconds)', 'king-addons'),
783 + 'type' => Controls_Manager::SLIDER,
784 + 'default' => array(
785 + 'size' => 0.15,
786 + ),
787 + 'range' => array(
788 + 'px' => array(
789 + 'min' => 0,
790 + 'max' => 3,
791 + 'step' => 0.1,
792 + ),
793 + ),
794 + 'selectors' => array(
795 + '{{WRAPPER}} .king-addons-image-hover-box-layout-11:hover .king-addons-image-hover-box-gradient:before' => 'transition-delay: {{SIZE}}s',
796 + '{{WRAPPER}} .king-addons-image-hover-box-layout-11 .king-addons-image-hover-box-gradient:after' => 'transition: transform 0.3s ease-out {{SIZE}}s',
797 +
798 + ),
799 + 'condition' => array(
800 + 'king_addons_image_hover_box_image_layout' => 'layout-11',
801 + ),
802 + ]
803 + );
804 +
805 +
806 +
807 +
808 +$this->end_controls_section();
809 +
810 +
811 + }
812 +
813 + protected function render(): void
814 + {
815 + $settings = $this->get_settings_for_display();
816 +
817 + // Define allowed tags and attributes for img tag
818 + $allowed_tags = wp_kses_allowed_html('post');
819 + $allowed_tags['img']['srcset'] = true;
820 + $allowed_tags['img']['sizes'] = true;
821 + $allowed_tags['img']['decoding'] = true;
822 + $allowed_tags['img']['loading'] = true;
823 +
824 + $title = '<' . esc_html($settings['king_addons_image_hover_box_title_tag']) . ' class="king-addons-image-hover-box-text-title">' . esc_html($settings['king_addons_image_hover_box_title']) . '</' . esc_html($settings['king_addons_image_hover_box_title_tag']) . '>';
825 +
826 + $layout_class = 'king-addons-image-hover-box-' . $settings['king_addons_image_hover_box_image_layout'];
827 + $hover_class = ' king-addons-image-hover-box-' . $settings['king_addons_image_hover_box_hover_effect'];
828 + $is_active_class = 'yes' === $settings['king_addons_image_hover_box_active'] ? ' king-addons-image-hover-box-active' : '';
829 +
830 + ?>
831 + <div class="king-addons-image-hover-box king-addons-image-hover-box-min-height <?php echo esc_attr($layout_class . $hover_class . $is_active_class) ?>">
832 + <?php if ('layout-7' === $settings['king_addons_image_hover_box_image_layout'] || 'layout-8' === $settings['king_addons_image_hover_box_image_layout']) : ?>
833 + <div class="king-addons-image-hover-box-border">
834 + <div class="king-addons-image-hover-box-br king-addons-image-hover-box-bleft king-addons-image-hover-box-border-lr"></div>
835 + <div class="king-addons-image-hover-box-br king-addons-image-hover-box-bright king-addons-image-hover-box-border-lr"></div>
836 + <div class="king-addons-image-hover-box-br king-addons-image-hover-box-btop king-addons-image-hover-box-border-tb"></div>
837 + <div class="king-addons-image-hover-box-br king-addons-image-hover-box-bottom king-addons-image-hover-box-border-tb"></div>
838 + </div>
839 + <?php endif; ?>
840 + <?php if (!empty($settings['king_addons_image_hover_box_image']['url'])) : ?>
841 + <?php
842 + $image_html = Group_Control_Image_Size::get_attachment_image_html($settings, 'king_addons_image_hover_box_image_size', 'king_addons_image_hover_box_image');
843 + echo wp_kses($image_html, $allowed_tags);
844 + ?>
845 + <?php endif; ?>
846 + <?php if ('layout-11' === $settings['king_addons_image_hover_box_image_layout']) : ?>
847 + <div class="king-addons-image-hover-box-gradient"></div>
848 + <?php endif; ?>
849 + <div class="king-addons-image-hover-box-text">
850 + <?php if ('layout-7' === $settings['king_addons_image_hover_box_image_layout']) : ?>
851 + <div class="king-addons-image-hover-box-text-centered">
852 + <?php endif; ?>
853 + <?php
854 + echo wp_kses_post($title);
855 + if (!empty($settings['king_addons_image_hover_box_description'])) :
856 + ?>
857 + <div class="king-addons-image-hover-box-text-description">
858 + <?php echo wp_kses_post($this->parse_text_editor($settings['king_addons_image_hover_box_description']));
859 + ?>
860 + </div>
861 + <?php endif; ?>
862 + <?php if ('layout-7' === $settings['king_addons_image_hover_box_image_layout']) : ?>
863 + </div>
864 + <?php endif; ?>
865 + </div>
866 + <?php
867 + if ($settings['king_addons_image_hover_box_image_custom_link']['url']) :
868 + ?>
869 + <a href="<?php echo esc_url($settings['king_addons_image_hover_box_image_custom_link']['url']); ?>"<?php
870 + echo(($settings['king_addons_image_hover_box_image_custom_link']['is_external']) ? ' target="_blank"' : '');
871 + echo(($settings['king_addons_image_hover_box_image_custom_link']['nofollow']) ? ' rel="nofollow"' : ''); ?>
872 + class="king-addons-image-hover-box-link"></a>
873 + <?php endif; ?>
874 + </div>
875 + <?php
876 + }
877 +}